站長(zhǎng)資訊網(wǎng)可以實(shí)現(xiàn)旋轉(zhuǎn)效果的屬性是“transform”，需要rotate()、rotate3d()、rotateX()、rotateY()等函數(shù)一起使用。transform屬性用于向元素應(yīng)用2D或3D轉(zhuǎn)換，允許對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css中可以實(shí)現(xiàn)旋轉(zhuǎn)效果的屬性是“transform”。
transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。
transform 屬性可以實(shí)現(xiàn)旋轉(zhuǎn)的屬性值：
-
rotate(angle) 定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。
-
rotate3d(x,y,z,angle) 定義 3D 旋轉(zhuǎn)。
-
rotateX(angle) 定義沿著 X 軸的 3D 旋轉(zhuǎn)。
-
rotateY(angle) 定義沿著 Y 軸的 3D 旋轉(zhuǎn)。
-
rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉(zhuǎn)。
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div,img,body{ margin: 0; padding: 0; } img.touxiang:hover{ transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); } img.touxiang{ margin: 0 auto; display: block; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; border-radius:100%; } </style> </head> <body><br><br><br><br> <img src="touxiang.jpg" alt=""/> </body> </html>
效果圖：
（學(xué)習(xí)視頻分享：css視頻教程）
