<title>CSS div旋轉(zhuǎn)</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旋轉(zhuǎn)</h1>

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

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

下面我們來看幾個使用<div>標(biāo)簽的旋轉(zhuǎn)案例：

案例一：旋轉(zhuǎn)45度

<div class="center">
<div class="rotate">我是旋轉(zhuǎn)的div</div>
</div>

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

案例二：旋轉(zhuǎn)90度

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

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

案例三：旋轉(zhuǎn)動畫

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

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

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