CSS3時鐘搖擺效果讓你的網站更加生動，給人一種時光飛逝的感受。這種效果通過CSS3的 transform 屬性實現，特別是使用了 rotate 屬性和 translate 屬性。這篇文章將向您展示如何使用CSS3創建一個時鐘搖擺效果。

.clock {
width: 200px;
height: 200px;
position: relative;
margin: 0 auto;
}
.hand {
width: 2px;
height: 90px;
background-color: #000;
position: absolute;
left: 50%;
transform-origin: bottom center;
transform: rotate(30deg) translateX(-1px);
animation: swing 2s ease-in-out infinite alternate;
}
@keyframes swing {
from {
transform: rotate(30deg) translateX(-1px);
}
to {
transform: rotate(-30deg) translateX(-1px);
}
}

通過使用上面的代碼，您可以創建一個200px x 200px 的div容器，然后添加一個代表指針的物體，即時鐘中的長針。我們將要使用transform的rotate屬性和translate屬性來對指針進行定位。同時，使用 CSS3 關鍵幀 ( @keyframes ) 和 animation 屬性來讓指針進行搖擺動畫。

最后，您可以根據需要調整這些值以獲得所需的效果。總之，CSS3時鐘搖擺效果是一個很酷的東西，它可以增強網站的可視性和交互性，是您可以實現的又一種特別的效果。