CSS3簡單時鐘是一個非常有趣的小項目，它可以通過CSS3的一些新特性來展示時鐘的運轉。下面我們來看一下如何實現。

.clock {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #fff;
position: relative;
margin: 0 auto;
transform: rotate(30deg);
box-shadow: -4px -4px 10px rgba(255, 255, 255, 0.7), 4px 4px 10px rgba(0, 0, 0, 0.5);
}
.clock .hour, .clock .minute, .clock .second {
position: absolute;
transform-origin: bottom center;
}
.clock .hour {
width: 8px;
height: 60px;
background-color: #000;
top: 30px;
left: calc(50% - 4px);
border-radius: 5px;
transform: rotate(30deg);
}
.clock .minute {
width: 5px;
height: 80px;
background-color: #000;
top: 20px;
left: calc(50% - 2.5px);
border-radius: 5px;
transform: rotate(120deg);
}
.clock .second {
width: 3px;
height: 100px;
background-color: #f00;
top: 10px;
left: calc(50% - 1.5px);
border-radius: 5px;
transform: rotate(245deg);
animation: rotate 60s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(245deg);
}
100% {
transform: rotate(605deg);
}
}

上述代碼實現了一個簡單的時鐘樣式，其中hour為時針，minute為分針，second為秒針。其中秒針使用了CSS3的動畫特性，讓它在一分鐘內旋轉一周。通過調整transform-origin屬性，我們可以控制針的轉動中心。

通過JavaScript可以獲取當前時間并將時分秒的角度傳遞給相應的指針，從而實現一個完整動態的時鐘。