站長資訊網(wǎng)
css3中旋轉有多種情況：1、“rotateX()”函數(shù)實現(xiàn)的旋轉是繞X軸；2、“rotateY()”函數(shù)實現(xiàn)的旋轉是繞Y軸；3、“rotateZ()”函數(shù)實現(xiàn)的旋轉是繞Z軸；4、“rotate()”函數(shù)實現(xiàn)的旋轉是繞原點。
本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css3旋轉是繞著哪根軸旋轉
在css中，旋轉可以順時針逆時針旋轉，也可以繞X、Y或Z軸旋轉，不同的旋轉樣式對應不同的函數(shù)。
1、“rotate()”函數(shù)
利用“rotate()”函數(shù)，可使元素順時針或逆時針旋轉。
示例如下：
<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>
輸出結果：
2、“rotateX()”函數(shù)
利用“rotateX()”函數(shù)，可使元素繞X軸旋轉。示例如下：
<html> <head> <style> img{ transform:rotatex(180deg); } </style> </head> <body> <img src="1118.02.png" alt=""> </body> </html>
輸出結果：
3、“rotateY()”函數(shù)
利用“rotateY()”函數(shù)，可使元素繞Y軸旋轉，示例如下：
<html> <head> <style> img{ transform:rotateY(180deg); } </style> </head> <body> <img src="1118.02.png" alt=""> </body> </html>
輸出結果：
4、“rotateZ()”函數(shù)
利用“rotateZ()”函數(shù)，可使元素繞Z軸旋轉。示例如下：
<html> <head> <style> img{ transform:rotateZ(180deg); } </style> </head> <body> <img src="1118.02.png" alt=""> </body> </html>
輸出結果：
（學習視頻分享：css視頻教程）
