css图片可以实现旋转吗?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
css图片可以实现旋转吗?
在CSS中,可以给图片添加transform:rotate()来实现图片旋转。
transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。
而,rotate(angle)定义 2D 旋转,在参数中规定角度。
示例:
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%;
}
效果图:
鼠标放在图片上,旋转180度,可用在头像上
更多web前端开发知识,请查阅 HTML中文网 !!