<title>CSS div旋轉</title>
<style> .rotate { width: 200px; height: 200px; background-color: coral; transform: rotate(45deg); margin: 20px; }
.center { display: flex; justify-content: center; align-items: center; height: 100vh; } </style>
<h1>CSS div旋轉</h1>

在網頁設計中，我們常常需要為元素添加一些特效來增加頁面的吸引力和動態性。其中一個常用的特效就是旋轉元素。通過CSS的transform屬性，我們可以很容易地給div元素添加旋轉效果。

通過CSS的transform: rotate(angle)屬性，我們可以將一個元素按照指定的角度旋轉。其中，angle是旋轉的角度，可以為正數或負數。正數表示順時針旋轉，負數表示逆時針旋轉。例如，transform: rotate(45deg)會將元素順時針旋轉45度。

下面我們來看幾個使用<div>標簽的旋轉案例：

案例一：旋轉45度

<div class="center">
<div class="rotate">我是旋轉的div</div>
</div>

上述代碼會將class為rotate的<div>元素旋轉45度。通過設置寬度、高度和背景顏色，在頁面上我們可以看到一個旋轉了45度的正方形。

案例二：旋轉90度

<div class="center">
<div class="rotate" style="transform: rotate(90deg)">我也是旋轉的div</div>
</div>

這次我們將div元素旋轉了90度。通過設置style="transform: rotate(90deg)"，我們可以實現逆時針旋轉90度。在頁面上，我們可以看到一個寬高相同的豎直矩形。

案例三：旋轉動畫

<div class="center">
<div class="rotate" style="animation: spin 2s linear infinite">我還能旋轉</div>
</div>
<br>
<style>
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>

上述代碼演示了一個旋轉動畫效果。通過使用@keyframes定義一個名為spin的鍵幀動畫，我們可以讓<div>元素不斷地順時針旋轉360度。通過設置animation: spin 2s linear infinite，我們使得旋轉動畫持續2秒，并且無限循環播放。

通過以上的代碼案例，我們可以學習如何使用CSS的transform: rotate(angle)屬性為<div>元素添加旋轉效果。通過設置不同的旋轉角度和動畫效果，我們可以創建出各種各樣的獨特效果，為網頁增添活力和創意。