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的提高都會有比較大的幫助哦。