現(xiàn)在用css3來(lái)做特效的已經(jīng)越來(lái)越多，在我們的愛(ài)家海外月子中心的項(xiàng)目中，用到了很多特效。其中有一項(xiàng)就是實(shí)現(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ū)分多個(gè)動(dòng)畫(huà)讓他們分開(kāi)執(zhí)行就把屬性分開(kāi)來(lái)寫(xiě)，不用區(qū)分就用all，ease-in-out(先慢到快再到慢)，之后鼠標(biāo)經(jīng)過(guò)的時(shí)候旋轉(zhuǎn)360°。

這樣一個(gè)簡(jiǎn)單的動(dòng)畫(huà)就實(shí)現(xiàn)了。是不是很簡(jiǎn)單，明白的小伙伴趕緊動(dòng)手試試吧！

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