CSS3 風鈴擺動是一種常見的實現模擬自然物體擺動效果的方法。下面我們將介紹如何使用 CSS3 的 transform、animation 和 keyframes 屬性來實現風鈴的擺動。

.windchime {
position: relative;
width: 100px;
height: 200px;
background-image: url("windchime.png");
background-repeat: no-repeat;
background-size: contain;
}
.windchime-clapper {
position: absolute;
bottom: 0;
width: 20%;
height: 20%;
background-color: #777;
border-radius: 50%;
transform-origin: bottom center;
animation: swing 2s ease-in-out infinite;
}
@keyframes swing {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(20deg);
}
100% {
transform: rotate(0deg);
}
}

我們首先創建一個容器，命名為 .windchime，并設置它的背景為鈴鐺的圖片，寬度和高度分別為 100px 和 200px。接著我們創建一個代表鈴鐺懸掛者的 div，命名為 .windchime-clapper，把它設置成絕對定位，并將它設置到容器底部，寬度和高度分別為容器的 20%。

接下來我們開始使用 CSS3 的 transform 和 animation 屬性來使鈴鐺懸掛者擺動。我們首先把懸掛者從底部中心點作為旋轉中心點，而后設定一個名為 swing 的關鍵幀動畫，動畫作用時間為 2s，動畫緩動效果為 ease-in-out，并且設置它無限循環播放。

在我們的關鍵幀動畫 swing 中，我們把鈴鐺懸掛者的旋轉角度從 0deg 變到 20deg，再變回 0deg，這樣就實現了一個鈴鐺懸掛者的擺動效果。當動畫播放結束后，它會自動重新開始播放，從而使鈴鐺不斷地擺動。