CSS3中函數(shù)rotate()如何實(shí)現(xiàn)旋轉(zhuǎn)技術(shù)

這篇文章主要介紹了CSS3中函數(shù)rotate()如何實(shí)現(xiàn)旋轉(zhuǎn)技術(shù)，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

rotate()函數(shù)能夠旋轉(zhuǎn)元素，它主要是在二維空間內(nèi)進(jìn)行操作，通過(guò)一個(gè)角度參數(shù)值，來(lái)設(shè)定旋轉(zhuǎn)的幅度。

如果對(duì)元素本身或者元素設(shè)置了perspective值，那么rotate3d()函數(shù)可以實(shí)現(xiàn)一個(gè)3維空間內(nèi)的旋轉(zhuǎn)。

關(guān)聯(lián)屬性：transform-origin。

取值

rotate(<angle>);<angle>為一個(gè)角度值，單位deg，可以為正數(shù)或者負(fù)數(shù)，正數(shù)是順時(shí)針旋轉(zhuǎn)，負(fù)數(shù)是逆時(shí)針旋轉(zhuǎn)。

rotateX(angele),相當(dāng)于rotate3d(1,0,0,angle)指定在3維空間內(nèi)的X軸旋轉(zhuǎn)

rotateY(angele),相當(dāng)于rotate3d(0,1,0,angle)指定在3維空間內(nèi)的Y軸旋轉(zhuǎn)

rotateZ(angele),相當(dāng)于rotate3d(0,0,1,angle)指定在3維空間內(nèi)的Z軸旋轉(zhuǎn)

語(yǔ)法

transform:rotate(<angle>);

CSS

.rotate_clockwise{

-webkit-transform:rotate(45deg);

-moz-transform:rotate(45deg);

position:absolute;

left:10px;

top:80px;

}

.rotate_anticlockwise{

-webkit-transform:rotate(-45deg);

-moz-transform:rotate(-45deg);

position:absolute;

left:200px;

top:80px;

}

.rotateX{

-webkit-transform:perspective(800px) rotateX(60deg);

-moz-transform:perspective(800px) rotateX(60deg);

position:absolute;

left:400px;

top:80px;

}

.rotateY{

-webkit-transform:perspective(800px) rotateY(60deg);

-moz-transform:perspective(800px) rotateY(60deg);

position:absolute;

left:600px;

top:80px;

}

.rotateZ{

-webkit-transform:perspective(800px) rotateZ(60deg);

-moz-transform:perspective(800px) rotateZ(60deg);

position:absolute;

left:800px;

top:80px;

}

HTML

<divclass="demo_box rotate_clockwise">順時(shí)針旋轉(zhuǎn)45度</div>

<divclass="demo_box rotate_anticlockwise">逆時(shí)針旋轉(zhuǎn)45度</div>

<divclass="demo_box rotateX">3維空間內(nèi)X軸旋轉(zhuǎn)60度</div>

<divclass="demo_box rotateY">3維空間內(nèi)Y軸旋轉(zhuǎn)60度</div>

<divclass="demo_box rotateZ">3維空間內(nèi)Z軸旋轉(zhuǎn)60度</div>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS3中函數(shù)rotate()如何實(shí)現(xiàn)旋轉(zhuǎn)技術(shù)”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!