CSS是前端網頁開發中一個非常重要的技術，其中一個非常炫酷的特效就是摩天輪旋轉。下面我們來一起了解如何使用CSS來實現摩天輪旋轉效果。

/* 設置容器的樣式 */
.container {
margin: 50px auto;
width: 200px;
height: 200px;
border: 1px solid #ccc;
position: relative;
perspective: 1000px;
}
/* 設置摩天輪上各個部分的樣式 */
.wheel {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 150px;
height: 150px;
border: 1px solid #ccc;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
animation: rotate 10s linear infinite;
}
/* 動畫效果 */
@keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
/* 設置車箱的樣式 */
.cabin {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) translateY(-80%);
width: 80px;
height: 80px;
border: 1px solid #ccc;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
/* 設置車廂的樣式，樣式同上 */
.carriage {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) translateY(-60%);
width: 40px;
height: 40px;
border: 1px solid #ccc;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

通過上面的代碼，我們完成了CSS摩天輪旋轉效果的實現。可以看到，我們在容器上定義了perspective屬性，這是3D效果所必須的。在車廂和車箱上設置了translateY屬性來讓它們在輪子上轉動。而摩天輪的旋轉則通過定義一個@keyframes動畫來實現。