現(xiàn)在用css3來做特效的已經(jīng)越來越多，在我們的愛家海外月子中心的項目中，用到了很多特效。其中有一項就是實現(xiàn)圖片360°的旋轉(zhuǎn)效果。
.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的意思是如果想?yún)^(qū)分多個動畫讓他們分開執(zhí)行就把屬性分開來寫，不用區(qū)分就用all，ease-in-out(先慢到快再到慢)，之后鼠標經(jīng)過的時候旋轉(zhuǎn)360°。
這樣一個簡單的動畫就實現(xiàn)了。是不是很簡單，明白的小伙伴趕緊動手試試吧！
上一篇： 背景圖如何過渡加載
下一篇： rgba()用法如何兼容ie8？
