CSS3的功能很強(qiáng)大川尖，不但可以添加很多的樣式隧魄，也可以繪制自定義的動(dòng)畫效果筋岛。要做一個(gè)圖片的旋轉(zhuǎn)木馬效果娶视，我們需要用到CSS3的3d轉(zhuǎn)換。對(duì)于3d轉(zhuǎn)換具體的內(nèi)容睁宰，雖然這塊內(nèi)容并不是那么容易讓人理解肪获，不過這里也就不做介紹了，可以在菜鳥教程或者W3C里好好看看柒傻，然后自己多動(dòng)手試試孝赫，一點(diǎn)點(diǎn)的去領(lǐng)會(huì)（本菜也是研究了好幾個(gè)小時(shí)才稍稍理解那些屬性的具體意思）。
學(xué)習(xí)網(wǎng)站
不多說红符，現(xiàn)在進(jìn)入正題青柄。
先看一個(gè)我自己做的簡(jiǎn)單的旋轉(zhuǎn)木馬效果
旋轉(zhuǎn)木馬demo
這個(gè)例子是我隨手寫的，非常簡(jiǎn)單预侯，不過只要你掌握了實(shí)現(xiàn)原理致开，你就可以隨行所欲的做出自己想要的華麗的效果。
首先我們要做這個(gè)旋轉(zhuǎn)木馬效果之前雌桑，我們要想想需要實(shí)現(xiàn)哪些3d的轉(zhuǎn)換喇喉。剛做的時(shí)候其實(shí)想到的就只有rotateY屬性。然后還得想想怎么實(shí)現(xiàn)校坑，如果給每個(gè)圖片都添加一個(gè)動(dòng)畫效果是不是太麻煩了拣技。所以我們可以創(chuàng)造一個(gè)容器，在容器里放好這些圖片耍目，然后對(duì)容器進(jìn)行旋轉(zhuǎn)膏斤，這樣，我們只需要對(duì)容器加一個(gè)動(dòng)畫效果就行邪驮。
那我們先來試試這樣做莫辨，我們先創(chuàng)建一個(gè)容器，創(chuàng)建四個(gè)div，這幾個(gè)div用絕對(duì)定位沮榜，讓他們共用中心點(diǎn)盘榨。
<div id="rq">
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
</div>
這四個(gè)div只需要添加不同的rotateY()屬性，使其圍成一個(gè)圈蟆融。所以每個(gè)div之間相距應(yīng)該是90deg。在容器里必須加一個(gè)屬性transform-style: preserve-3d;讓他的子元素也是實(shí)現(xiàn)3d效果型酥。
查看效果山憨，一看這是什么東西。在這里我們發(fā)現(xiàn)了一個(gè)問題弥喉，因?yàn)檫@幾個(gè)div因?yàn)槲恢檬且粯拥挠艟梗栽趓otateY()旋轉(zhuǎn)的時(shí)候，都疊在了一起由境。
所以我們得想個(gè)辦法棚亩，讓這幾個(gè)div分開來，并沿著中心點(diǎn)進(jìn)行旋轉(zhuǎn)藻肄。
好好想想蔑舞，看看能不能找到解決辦法拒担！
還記得我們?cè)趯W(xué)習(xí)3d轉(zhuǎn)換的時(shí)候嘹屯，了解過perspective和translateZ()方法（剛學(xué)的時(shí)候，這兩個(gè)內(nèi)容不太好理解从撼，需要自己好好的研究一下）州弟。perspective是舞臺(tái)視距，translateZ()會(huì)跟著舞臺(tái)視距進(jìn)行移動(dòng)低零。我們可以通過這兩個(gè)屬性來把這幾個(gè)div分離開來婆翔。首先我們?cè)谌萜魍饷嬖偌右粋€(gè)舞臺(tái)。
<div id="all">
<div id="rq">
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
</div>
</div>
給舞臺(tái)加一個(gè)perspective: 800px;屬性（這個(gè)屬性的大小可以自己定義）掏婶。然后再每個(gè)div里加上translateZ()屬性啃奴，可以自己慢慢試，設(shè)置好一個(gè)合適的值雄妥。如果方向什么有偏差最蕾，可以通過perspective-origin:進(jìn)行微調(diào)。調(diào)整好了之后老厌，用關(guān)鍵幀動(dòng)畫實(shí)現(xiàn)給容器加個(gè)旋轉(zhuǎn)的效果瘟则，就大功告成了。只要你理解了perspective和translateZ()方法枝秤，對(duì)你來說肯定很簡(jiǎn)單醋拧。
對(duì)于源碼的話，小伙伴們可以查看上面那個(gè)demo網(wǎng)頁的審查元素來查看。
你現(xiàn)在就可以用上你自己喜歡的圖片來做一個(gè)華麗的的旋轉(zhuǎn)木馬效果了丹壕！
