<div>旋轉屬性（transform rotate）是一種CSS3屬性，用于對元素進行旋轉操作。該屬性允許開發者通過指定旋轉的角度，將元素按照順時針或逆時針方向進行旋轉。這種旋轉不會改變元素的大小和形狀，只會改變元素的外觀。下面將通過幾個代碼案例詳細解釋div旋轉屬性的用法和效果。
在第一個案例中，我們創建一個矩形的div元素，并將其添加到 HTML 文檔中。我們給該元素設置一個背景顏色和一些文本內容，以便更容易觀察旋轉效果。接下來，我們使用CSS的transform屬性將該矩形元素順時針旋轉45度。代碼如下：

<style>
.rectangle {
background-color: #F5CB5C;
width: 200px;
height: 100px;
transform: rotate(45deg);
}
</style>
<div class="rectangle">
This is a rectangle.
</div>

在上述代碼中，我們給 div 元素添加了一個名為 "rectangle" 的類，以便樣式表可以定位到該元素。對于 .rectangle 類，我們設置了背景顏色為 #F5CB5C，寬度為 200px，高度為 100px，并且使用 transform: rotate(45deg) 將該元素順時針旋轉了 45 度。這種旋轉的效果會改變元素的外觀，將其變為一個傾斜的矩形。
在第二個案例中，我們將展示如何使用 div 旋轉屬性來創建一個旋轉的圖標。我們先創建一個包含三個水平線段的 div 元素，并使用 CSS 設置每條線段的顏色和寬度。然后，我們對整個圖標進行旋轉，使其成為一個叉叉狀。代碼如下：

<style>
.icon {
width: 50px;
height: 50px;
position: relative;
}
.line {
position: absolute;
width: 100%;
height: 3px;
}
#line1 {
background-color: #F5CB5C;
top: 20px;
}
#line2 {
background-color: #F5CB5C;
top: 50%;
transform: rotate(45deg);
}
#line3 {
background-color: #F5CB5C;
top: 20px;
transform: rotate(-45deg);
}
</style>
<div class="icon">
<div class="line" id="line1"></div>
<div class="line" id="line2"></div>
<div class="line" id="line3"></div>
</div>

在上述代碼中，我們給 div 元素添加了一個名為 "icon" 的類，并設置其寬度和高度為 50px。然后，我們創建了三個水平線段，并分別給它們添加了名為 "line" 的類。對于其中的兩個線段，我們分別使用 transform: rotate(45deg) 和 transform: rotate(-45deg) 將其順時針和逆時針旋轉了 45 度，從而形成了一個傾斜的叉叉圖標。通過調整旋轉角度和線段大小，我們可以創建出不同樣式的旋轉圖標。
通過以上的案例，我們可以看到 div 旋轉屬性可以輕松實現元素的旋轉效果。無論是用來改變形狀，還是用來創建獨特的圖標，該屬性都能為我們的網頁設計提供更多的可能性。希望本文能給你對 div 旋轉屬性的理解帶來一些幫助。