CSS3是最新的CSS標(biāo)準(zhǔn)，其中包含了各種炫酷的特效，其中之一就是旋轉(zhuǎn)圖標(biāo)特效。通過CSS3的transform屬性，我們可以實(shí)現(xiàn)簡單的旋轉(zhuǎn)效果，也可以實(shí)現(xiàn)更加復(fù)雜的圖形變換效果。

.icon {
width: 50px;
height: 50px;
/* transform-origin: center center; */
transform: rotate(0deg);
transition: all 0.3s ease;
}
.icon:hover {
transform: rotate(360deg);
}

上面的代碼是一個(gè)簡單的旋轉(zhuǎn)圖標(biāo)的實(shí)現(xiàn)，我們首先定義了一個(gè)名為icon的類，然后指定了這個(gè)元素的寬高。接著我們使用了transform屬性，將元素旋轉(zhuǎn)了0度，并設(shè)置了旋轉(zhuǎn)的過渡效果。當(dāng)鼠標(biāo)懸浮在這個(gè)元素上時(shí)，我們通過:hover選擇器，將元素的transform屬性改為了360度，從而實(shí)現(xiàn)了旋轉(zhuǎn)的效果。

在上面的代碼中，我們還注釋掉了transform-origin屬性。transform-origin是一個(gè)非常有用的屬性，它指定了元素變換時(shí)的中心點(diǎn)，默認(rèn)情況下這個(gè)中心點(diǎn)是元素的中心點(diǎn)。如果我們將這個(gè)中心點(diǎn)設(shè)置為左上角或右下角，就可以實(shí)現(xiàn)更加復(fù)雜的動(dòng)畫效果。比如我們可以把一個(gè)星星不斷旋轉(zhuǎn)，或者讓一個(gè)圖標(biāo)從左上角飛到右下角。

除了使用rotate函數(shù)來實(shí)現(xiàn)旋轉(zhuǎn)效果，我們還可以使用skew函數(shù)來實(shí)現(xiàn)傾斜效果，或者使用scale函數(shù)來實(shí)現(xiàn)縮放效果。這些函數(shù)都可以通過CSS3的transform屬性來實(shí)現(xiàn)，從而讓我們的頁面更加漂亮、生動(dòng)。