在《CSS3 transition transform属性及实例详解》中我们实现了:鼠标放到图片上,图片等比例放大的效果,今天分享transform:rotate()制作旋转图片。
CSS3中的transform:rotate()可以实现旋转功能,可以在CSS里面设定旋转的角度,也可以设定旋转用多少时间来完成。
旋转图片HTML代码
<img src="img/125jz.png" />
CSS代码
img{ border: #000 solid 2px; display: block; margin: 50px auto; border-radius: 50%; transition: all 2.0s; } img:hover{ transform: rotate(360deg); }
旋转图片演示
125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/3224.html
评论列表(1条)
鼠标放上去不仅旋转,还有放大效果的话,加上scale(1.4) ,代码如下:
image:hover
{
transform:scale(1.4) rotate(360deg);
}