CSS3中函數rotate()如何實現旋轉技術

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

rotate()函數能夠旋轉元素，它主要是在二維空間內進行操作，通過一個角度參數值，來設定旋轉的幅度。

如果對元素本身或者元素設置了perspective值，那么rotate3d()函數可以實現一個3維空間內的旋轉。

關聯屬性：transform-origin。

取值

rotate(<angle>);<angle>為一個角度值，單位deg，可以為正數或者負數，正數是順時針旋轉，負數是逆時針旋轉。

rotateX(angele),相當于rotate3d(1,0,0,angle)指定在3維空間內的X軸旋轉

rotateY(angele),相當于rotate3d(0,1,0,angle)指定在3維空間內的Y軸旋轉

rotateZ(angele),相當于rotate3d(0,0,1,angle)指定在3維空間內的Z軸旋轉

語法

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">順時針旋轉45度</div>

<divclass="demo_box rotate_anticlockwise">逆時針旋轉45度</div>

<divclass="demo_box rotateX">3維空間內X軸旋轉60度</div>

<divclass="demo_box rotateY">3維空間內Y軸旋轉60度</div>

<divclass="demo_box rotateZ">3維空間內Z軸旋轉60度</div>

感謝你能夠認真閱讀完這篇文章，希望小編分享的“CSS3中函數rotate()如何實現旋轉技術”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!