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

我們提供的服務(wù)有：成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、徽縣ssl等。為超過千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學管理、有技術(shù)的徽縣網(wǎng)站制作公司

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

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

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

取值

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

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

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

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

語法

transform:rotate();

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

順時針旋轉(zhuǎn)45度