CSS3实现360度旋转、旋转放大、放大、移动代码怎么写

CSS3实现360度旋转、旋转放大、放大、移动代码怎么写?很多童鞋在做HTML5页面的时候都想用些动态效果，这时候就需要我们会使用CSS3来实现例如旋转，方法等效果了。

效果一：360°旋转 修改rotate(旋转度数)

       * { transition:All 0.4s ease-in-out; -webkit-transition:All 0.4s ease-in-out; -moz-transition:All 0.4s ease-in-out; -o-transition:All 0.4s ease-in-out;}*:hover { transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg);}

效果二：放大 修改scale(放大的值)

       * {transition:All 0.4s ease-in-out; -webkit-transition:All 0.4s ease-in-out; -moz-transition:All 0.4s ease-in-out; -o-transition:All 0.4s ease-in-out;}*:hover { transform:scale(1.2); -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -o-transform:scale(1.2); -ms-transform:scale(1.2);}

效果三：旋转放大 修改rotate(旋转度数) scale(放大值)

       * {transition:All 0.4s ease-in-out; -webkit-transition:All 0.4s ease-in-out; -moz-transition:All 0.4s ease-in-out; -o-transition:All 0.4s ease-in-out;}*:hover {transform:rotate(360deg) scale(1.2); -webkit-transform:rotate(360deg) scale(1.2); -moz-transform:rotate(360deg) scale(1.2); -o-transform:rotate(360deg) scale(1.2); -ms-transform:rotate(360deg) scale(1.2);}

效果四：上下左右移动 修改translate(x轴,y轴)

       * {transition:All 0.4s ease-in-out; -webkit-transition:All 0.4s ease-in-out; -moz-transition:All 0.4s ease-in-out; -o-transition:All 0.4s ease-in-out;}*:hover { transform:translate(0,-10px); -webkit-transform:translate(0,-10px); -moz-transform:translate(0,-10px); -o-transform:translate(0,-10px); -ms-transform:translate(0,-10px);}

具体制作的效果，有兴趣的童鞋可以参看《HTML5+css3实现炫酷齿轮转动动画》效果，多研究研究会HTML5和CSS3的提高都会有比较大的帮助哦。