站長資訊網(wǎng)
css3控制旋轉(zhuǎn)方向的屬性是transform屬性；該屬性與scale()方法配合使用可以控制元素的2d旋轉(zhuǎn)方向，該屬性與scale3d()方法配合使用可控制元素的3d旋轉(zhuǎn)方向，語法為“transform:rotate3d(x,y,z)”。
本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版本、Dell G3電腦。
css3控制旋轉(zhuǎn)方向的屬性是什么
在CSS3中，可以利用transform功能實(shí)現(xiàn)文字或圖像的旋轉(zhuǎn)、縮放、傾斜、移動這4中類型的變形處理。
瀏覽器支持
到目前為止：Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上瀏覽器支持該屬性。
2d旋轉(zhuǎn)
使用rotate方法，在參數(shù)中加入角度值，角度值后面跟表示角度單位的“deg”文字即可，旋轉(zhuǎn)方向為順時針方向。
transform：rotate（45deg）；
3D旋轉(zhuǎn)
分別使用rotateX方法、rotateY方法、rotateZ方法使元素圍繞X軸、Y軸、Z軸旋轉(zhuǎn)，在參數(shù)中加入角度值，角度值后面跟表示角度單位的deg文字即可，旋轉(zhuǎn)方向為順時針旋轉(zhuǎn)。
transform：rotateX（45deg）； transform：rotateY（45deg）； transform：rotateZ（45deg）； transform：rotateX（45deg） rotateY（45deg） rotateZ（45deg）； transform：scale（0.5） rotateY（45deg） rotateZ（45deg）；
示例如下：
<html> <head> <style> div { margin:30px; width:200px; height:100px; background-color:yellow; /* Rotate div */ transform:rotate(9deg); -ms-transform:rotate(9deg); /* Internet Explorer */ -moz-transform:rotate(9deg); /* Firefox */ -webkit-transform:rotate(9deg); /* Safari 和 Chrome */ -o-transform:rotate(9deg); /* Opera */ } </style> </head> <body> <div>Hello World</div> </body> </html>
輸出結(jié)果：
（學(xué)習(xí)視頻分享：css視頻教程）
