rotate()

語(yǔ)法

transform:rotate(<angle>);

語(yǔ)法項目	說(shuō)明
初始值	0
適用于	塊元素和行內元素
可否繼承	否
單位	角度值deg，弧度值rad，梯度gard，轉/圈turn
媒介	視覺(jué)
版本	CSS3.0

說(shuō)明

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

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

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

取值

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

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軸旋轉

實(shí)例代碼

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 復制代碼

<div class="demo_box rotate_clockwise">順時(shí)針旋轉45度</div>
<div class="demo_box rotate_anticlockwise">逆時(shí)針旋轉45度</div>
<div class="demo_box rotateX">3維空間內X軸旋轉60度</div>   
<div class="demo_box rotateY">3維空間內Y軸旋轉60度</div>  
<div class="demo_box rotateZ">3維空間內Z軸旋轉60度</div>

兼容性

IE	Firefox	Opera	Safari	Chrome
IE 10+	Firefox 3.5+	Opera 11.50+	Safari 10+	Chrome 2.0+

參考文獻

本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請點(diǎn)擊舉報。

欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久

rotate()

語(yǔ)法

說(shuō)明

取值

實(shí)例代碼

兼容性

參考文獻