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