CSS3作為現(xiàn)代Web設計的一個基礎知識點，有很多有趣的應用。在本文中，我們將使用CSS3來制作一個簡單的時鐘。

/* HTML代碼 */
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
</div>
/* CSS代碼 */
.clock {
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.hour,
.minute,
.second {
width: 2px;
height: 40px;
background-color: #000;
position: absolute;
left: 50%;
top: 50%;
transform-origin: bottom center;
}
.hour {
transform: rotate(30deg);
}
.minute {
transform: rotate(90deg);
}
.second {
transform: rotate(135deg);
}

首先，在HTML中，我們創(chuàng)建了一個帶有三個子元素（小時，分鐘，秒鐘）的容器。接下來，我們使用CSS來設置容器的大小和基本樣式。我們設置了容器的寬度和高度，使其成為一個正方形。然后，我們使用border-radius屬性將其變成圓形。最后，我們設置了一個內(nèi)陰影，以使其看起來更現(xiàn)實。

接下來，我們設置了三個細長的豎直條形元素（小時，分鐘和秒鐘），并絕對定位到了容器的中心。我們還使用了transform-origin屬性，使它們的旋轉點在底部中心位置。這樣，我們可以輕松地設置它們沿著圓形外形旋轉。

對于每個豎直條形元素，我們通過設置其transform屬性來將其旋轉到正確的位置。這些旋轉值是固定的，因為它們是以12小時為單位設置的。

到這里，我們已經(jīng)成功地創(chuàng)建了一個簡單的CSS3時鐘。雖然它不是功能齊全的時鐘，但是它為我們提供了一個關于CSS3是如何工作的好參考。我們可以進一步擴展它，加入數(shù)字時鐘面板，以及用JS實現(xiàn)動態(tài)的時間顯示。