站长资讯网
最全最丰富的资讯网站

css中可以实现旋转效果的属性是什么

可以实现旋转效果的属性是“transform”,需要rotate()、rotate3d()、rotateX()、rotateY()等函数一起使用。transform属性用于向元素应用2D或3D转换,允许对元素进行旋转、缩放、移动或倾斜。

css中可以实现旋转效果的属性是什么

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

css中可以实现旋转效果的属性是“transform”。

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

transform 属性可以实现旋转的属性值:

  • rotate(angle) 定义 2D 旋转,在参数中规定角度。

  • rotate3d(x,y,z,angle) 定义 3D 旋转。

  • rotateX(angle) 定义沿着 X 轴的 3D 旋转。

  • rotateY(angle) 定义沿着 Y 轴的 3D 旋转。

  • rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。

示例:

<!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>

效果图:

css中可以实现旋转效果的属性是什么

(学习视频分享:css视频教程)

赞(0)
分享到: 更多 (0)

网站地图   沪ICP备18035694号-2    沪公网安备31011702889846号