html中旋转效果图,CSS3 transform:rotate()制作旋转图片

在《CSS3 transition transform属性及实例详解》中我们实现了：鼠标放到图片上，图片等比例放大的效果，今天分享transform:rotate()制作旋转图片。

旋转图片HTML代码

CSS代码

img{

border: #000 solid 2px;

display: block;

margin: 50px auto;

border-radius: 50%;

transition: all 2.0s;

}

img:hover{

transform: rotate(360deg);

}

旋转图片演示

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