<div>在CSS中，我們可以通過使用transform屬性來實現元素的旋轉效果。transform屬性可以改變元素的大小、位置、角度和形狀等，其中包括旋轉。使用transform的旋轉功能可以使一個div元素繞著其位置旋轉一定的角度，為網頁增添動態和視覺效果。</div>
<div>下面的幾個代碼案例將詳細解釋如何使用CSS的div旋轉功能：</div>
<div>案例1：簡單的水平旋轉</div>

在這個案例中，我們將一個div元素繞著其中心水平旋轉45度。

<code>
<p>\<div class="box"></div>\</p>
<p>\<style>\</p>
<p>.box {</p>
<p>  width: 200px;</p>
<p>  height: 200px;</p>
<p>  background-color: red;</p>
<p>  transform: rotateY(45deg);</p>
<p>}\</style>\</p>
</code>

上述代碼中，我們創建了一個class為box的div元素，設置其寬度和高度為200px，背景顏色為紅色。通過使用transform屬性的rotateY函數，并傳入45度的參數，實現了div元素的水平旋轉效果。

<div>案例2：傾斜旋轉</div>

這個案例中，我們將一個div元素同時進行水平傾斜和旋轉。

<code>
<p>\<div class="box"></div>\</p>
<p>\<style>\</p>
<p>.box {</p>
<p>  width: 200px;</p>
<p>  height: 200px;</p>
<p>  background-color: blue;</p>
<p>  transform: skewX(30deg) rotateZ(60deg);</p>
<p>}\</style>\</p>
</code>

上述代碼中，我們同樣創建了一個class為box的div元素，并設置其寬度和高度為200px，背景顏色為藍色。通過同時使用transform屬性的skewX和rotateZ函數，并分別傳入30度和60度的參數，實現了div元素的水平傾斜和旋轉效果。

<div>案例3：動態旋轉</div>

在這個案例中，我們使用CSS3中的動畫功能來實現div元素的旋轉效果。

<code>
<p>\<div class="box"></div>\</p>
<p>\<style>\</p>
<p>@keyframes rotate {</p>
<p>  0% { transform: rotate(0deg); }</p>
<p>  100% { transform: rotate(360deg); }</p>
<p>}</p>
<p>.box {</p>
<p>  width: 200px;</p>
<p>  height: 200px;</p>
<p>  background-color: green;</p>
<p>  animation: rotate 3s linear infinite;</p>
<p>}\</style>\</p>
</code>

上述代碼中，我們同樣創建了一個class為box的div元素，并設置其寬度和高度為200px，背景顏色為綠色。通過使用@keyframes規則定義一個名為rotate的動畫，使div元素在0%到100%的時間內從0度旋轉到360度。在.box中，我們使用animation屬性將旋轉動畫應用于div元素，設置動畫的播放時間為3秒，動畫的播放方式為線性，且動畫無限循環播放。

<div>通過使用transform屬性，我們可以輕松實現div元素的旋轉效果。無論是簡單的水平旋轉，還是傾斜旋轉，抑或是動態旋轉，CSS的div旋轉功能為我們提供了豐富而有趣的設計選擇。</div>