在網頁設計中，時鐘是一個十分常見的元素，無論是作為頁面的裝飾或者作為實用的倒計時工具都有很多的使用場景。而CSS3正是一個十分強大的工具，不僅僅可以實現頁面的動態效果，還可以設計出非常炫酷的時鐘效果。下面我們來看一下如何用CSS3畫出一個時鐘。

.clock{
width: 200px;
height: 200px;
border: 10px solid #000;
border-radius: 50%;
position: relative;
}
.hour,
.minute,
.second{
width: 2px;
height: 60px;
background-color: #000;
border-radius: 20px;
position: absolute;
top: 50%;
left: 50%;
transform-origin: bottom;
}
.hour{
transform: translate(-1px, -30px) rotate(30deg);
}
.minute{
transform: translate(-1px, -40px) rotate(180deg);
}
.second{
transform: translate(-1px, -45px) rotate(30deg);
background-color: #f00;
}

上述代碼中，我們首先定義了一個class為.clock的樣式，用來給時鐘的外框添加樣式。其中設置了寬高、邊框、圓角和相對定位等樣式。接下來，通過>.hour、.minute、.second來分別定義時針、分針、秒針的樣式。

在三個鐘針的樣式中，最重要的是transform屬性，用來實現旋轉效果。transform-origin屬性用于定義旋轉中心，默認為元素中心。這里我們將其定位在針尾部。translate用于移動針的位置，rotate則是實現旋轉。例如，.hour的針長30像素，角度為30度，旋轉中心在針底部。因此我們將其translate到它應該在的位置上，再設置rotate，就能得到正確的效果。

另外，由于秒針一般要突出顯示，我們將它設置為紅色。

至此，我們就成功地用CSS3畫出了一個簡單的時鐘。將其嵌入到網頁中，便能實現一個有趣的時鐘效果。