CSS 輪番轉動

使用 CSS 轉動動畫來創建一個非常棒的輪番展示！

首先，需要使用<ul>和<li>元素來創建輪番展示。下面是一個簡單的例子：

<ul class="carousel">
<li><img src="image1.jpg"></li>
<li><img src="image2.jpg"></li>
<li><img src="image3.jpg"></li>
<li><img src="image4.jpg"></li>
</ul>

接下來，使用 CSS 來創建旋轉動畫。下面的 CSS 代碼實現了一個不斷旋轉的動畫：

.carousel {
-webkit-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 15s;
animation-duration: 15s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes rotate {
0% { -webkit-transform: rotateY(0); transform: rotateY(0); }
25% { -webkit-transform: rotateY(90deg); transform: rotateY(90deg); }
50% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
75% { -webkit-transform: rotateY(270deg); transform: rotateY(270deg); }
100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); }
}
@keyframes rotate {
0% { -webkit-transform: rotateY(0); transform: rotateY(0); }
25% { -webkit-transform: rotateY(90deg); transform: rotateY(90deg); }
50% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
75% { -webkit-transform: rotateY(270deg); transform: rotateY(270deg); }
100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); }
}

現在，整個輪番展示已經被創建了，而且還有一個不斷旋轉的動畫效果。你可以使用其他 CSS 屬性調整輪番展示的樣式和位置。

期待看到你創建的精美輪番展示！