CSS3 旋轉(zhuǎn)是一項(xiàng)非常有趣的特效，可以讓你的頁面看起來更加生動(dòng)活潑。下面我們就來學(xué)習(xí)如何使用CSS3 旋轉(zhuǎn)來展現(xiàn)一些酷炫的效果。

.box {
width: 100px;
height: 100px;
background-color: #ccc;
transition: transform 0.5s ease;
}
.box:hover {
transform: rotate(180deg);
}

在上面的代碼中，我們定義了一個(gè)名為“box”的元素，并設(shè)置其寬高為100像素，背景色為灰色。在鼠標(biāo)懸停到該元素上時(shí)，我們使用“transform: rotate(180deg)”來讓該元素旋轉(zhuǎn)180度。

除了使用:hover來觸發(fā)旋轉(zhuǎn)效果外，我們也可以使用JavaScript來觸發(fā)。例如：

var box = document.getElementById("box");
box.style.transform = "rotate(180deg)";

以上代碼可以在頁面加載后馬上將名為“box”的元素旋轉(zhuǎn)180度。

另外，我們還可以通過CSS3的其他屬性來進(jìn)一步控制旋轉(zhuǎn)效果，例如scale、skew等等。這里就不再贅述了，有興趣的讀者可以自行學(xué)習(xí)。

總之，CSS3 旋轉(zhuǎn)是一項(xiàng)充滿創(chuàng)意和想象力的特效，可以讓我們的頁面看起來更加有趣和生動(dòng)。希望本文能夠?qū)Υ蠹矣兴鶈l(fā)和幫助。