多语言展示
当前在线:953今日阅读:84今日分享:32

css3如何实现360度旋转效果

CSS3的出现让我们可以用很短的代码实现特别绚丽的效果,有了CSS3我们可以做一些简单的效果,这些效果完全可以替代JS的功能,使代码更加优化。
工具/原料

DW网页编辑器

方法/步骤
1

打开DW网页编辑器,代码已经提前测试好了,div代码如下所示,

2

CSS样式代码如下所示,

3

360度旋转是由css代码控制的,我们可以根据自己的需要改变度数,不过最好要兼容各个浏览器,加上-mo-(火狐)、-o-(欧朋)、-webkit-(谷歌)可更好的兼容浏览器。

4

保存一下代码,用浏览器打开,初始效果如下所示。

5

用鼠标移到上面,效果比初始效果扩大了四倍,当然这也是由代码控制的,代码如下所示,-o-transform:rotate(360deg) scale(2,2)。

注意事项

共同分享,共同进步。

推荐信息