CSS實現360度轉動

前言：
在CSS中，旋轉除了支持2D之外，還支持3D旋轉操作。下面我們就來介紹一下CSS3中如何實現360度轉動的操作。
代碼實現：
首先，我們需要定義一個div標簽，然后定義它的樣式：
div{
width: 200px;
height: 200px;
background-color: red;
transform-style: preserve-3d;
animation: rotate 5s linear infinite;
}
說明:
(1)設置div的長寬為200px，背景顏色為紅色。
(2)設置transform-style屬性為preserve-3d，這個屬性是用來設置子元素的變換方式的，這個屬性是非常重要的，沒有這個屬性那么在3D旋轉時就無法展現正常的效果。
(3)設置animation屬性，該屬性讓我們的div元素可以動起來，可以實現360度的轉動。
接著，我們需要定義一個CSS動畫樣式，實現div的360度旋轉：
@keyframes rotate{
from{transform: rotateY(0deg)}
to{transform: rotateY(360deg)}
}
說明：
(1)使用@keyframes定義一個名為rotate的動畫樣式。
(2)from表示從什么狀態開始，這里我們將div的旋轉角度設置為0度，也就是沒有旋轉。
(3)to表示到什么狀態，這里我們將div的旋轉角度設置為360度，也就是旋轉一圈。
最后，我們在頁面中引入定義好的div標簽，如下所示：
<div></div>
最終實現：
執行完上述代碼后，我們就可以看到頁面上出現了一塊紅色的正方形，并且它可以360度無限旋轉，達到了我們的預期效果。