CSS3的旋轉(zhuǎn)效果非常酷炫，可以讓網(wǎng)頁更加生動有趣。其中一個非常重要的因素就是旋轉(zhuǎn)中心軸的設(shè)置。下面來詳細(xì)講解一下CSS3旋轉(zhuǎn)中軸的相關(guān)知識。

.transform {
transform: rotate(30deg);
transform-origin: 50% 50%;
}

上述代碼中，transform-origin就是用來設(shè)置旋轉(zhuǎn)中心軸的。具體來說，這個屬性有兩個值，分別表示在X軸和Y軸上的位置。這里設(shè)置的50% 50%就表示在元素的中心位置旋轉(zhuǎn)。

.transform {
transform: rotate(30deg);
transform-origin: 0 0;
}

此外，我們也可以設(shè)置transform-origin的百分比值。比如上面這段代碼中，transform-origin設(shè)置為0 0，就表示元素的左上角作為旋轉(zhuǎn)中心軸。

當(dāng)然，除了使用百分比值，我們還可以使用一些關(guān)鍵詞來設(shè)置旋轉(zhuǎn)中心軸。比如top、bottom、left、right、center等。需要注意的是，這些值只在單個方向上起作用，比如top center表示在Y軸上居中旋轉(zhuǎn)。

總的來說，設(shè)置旋轉(zhuǎn)中心軸可以讓我們實(shí)現(xiàn)更加靈活多樣的旋轉(zhuǎn)效果，非常值得掌握。