實現CSS3 3D圍繞旋轉
阿新 • • 發佈：2018-12-16
本案例主要使用了CSS3中的變換transform和動畫animation屬性，實現了跑馬燈效果，詳細的解釋在程式碼中的註釋中。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.11.0.js" ></script> <style> * { margin: 0; padding: 0; } .container { /*指定觀察者與平面的距離，使有透視效果*/ /*若無法正常3d效果，將perspective屬性提到更上一個父容器即可(此處已上提，從items-->container)*/ perspective: 1000px; } .items { width: 200px; height: 200px; border: 1px solid black; margin: 200px auto; /*指定子元素定位在三維空間內*/ transform-style: preserve-3d; /*讓所有item的父級元素（即items）旋轉，item就是圍繞著旋轉了*/ animation: doMove 5s infinite linear; } .item { width: 200px; height: 200px; background-color: skyblue; opacity: .6; font-size: 200px; line-height: 200px; text-align: center; position: absolute; } .item img{ width: 200px; height: 200px; } /*定義自動旋轉的動畫*/ @keyframes doMove { 100%{ transform: rotateY(-360deg); } } .items:hover { /*滑鼠移入 暫停動畫*/ animation-play-state: paused; } </style> </head> <body> <div class="container"> <div class="items"> <!--簡便起見，可以用背景色和數字代替圖片 此處我用的是圖片--> <div class="item"><img src="img/1.jpg" /></div> <div class="item"><img src="img/2.jpg" /></div> <div class="item"><img src="img/3.jpg" /></div> <div class="item"><img src="img/4.jpg" /></div> <div class="item"><img src="img/5.jpg" /></div> <div class="item"><img src="img/1.jpg" /></div> </div> </div> <script> $(function () { var itemNum = $(".container .items .item").length;//要旋轉的div的數量 var itemDeg = 360 / itemNum; ///計算平均偏移角度，後面的itemDeg*index是不同索引div的偏移角度 $(".items>.item").each(function (index, element) { $(element).css({ //給每一個item設定好位置 //rotateY讓每一個item繞著Y軸偏移，itemDeg*index是不同索引div的偏移角度 //translateZ是控制item在角度偏移後，往他們的正上方移動的距離，數值越大旋轉的範圍越大 transform: "rotateY(" + itemDeg * index + "deg) translateZ(280px)" }); }); }); </script> </body> </html>