咨询电话:
15628812133
24
2017/06

css3如何实现图片360°旋转效果?

发布时间:2017-06-24 18:45:33
发布者:jiangbing
浏览量:
0

现在用css3来做特效的已经越来越多,在我们的爱家海外月子中心的项目中,用到了很多特效。其中有一项就是实现图片360°的旋转效果。

blob.png

.haiwai .change img{ transition:All 0.4s ease-in-out; -webkit-transition:All 0.8s ease-in-out; -moz-transition:All 0.4s ease-in-out; -o-transition:All 0.8s ease-in-out;}
.haiwai .change img:hover{transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg);    -o-transform:rotate(360deg); -ms-transform:rotate(360deg);}

首先要定义图片,这里all的意思是如果想区分多个动画让他们分开执行就把属性分开来写,不用区分就用all,ease-in-out(先慢到快再到慢),之后鼠标经过的时候旋转360°。

这样一个简单的动画就实现了。是不是很简单,明白的小伙伴赶紧动手试试吧!

演示地址:http://www.cnwenhui.cn/d/demo/rotate/

关键词:
返回列表