CSS3新增了很多新的屬性，可以用很少的代碼實現炫酷的動畫效果，但由於兼容性各瀏覽器的能力存在不足，有特別需求的網站就呵呵啦。H5C3已是大勢所趨了，之前看過一個新聞，Chrome將在年底全面轉向H5，拋棄了Flash。。
本案例主要使用了CSS3中的變換transform和動畫animation屬性，實現了跑馬燈效果，詳細的解釋在代碼中的注釋中。
做好布局之后的效果圖
添加了animation樣式，實現自動旋轉，並且鼠標移入，停止動畫。（鼠標移入，繞Z軸旋轉90度）
代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>3D旋轉</title> 6 <script src='jquery-3.0.0.min.js'></script> 7 <style> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 .container { 13 /*指定觀察者與平面的距離，使有透視效果*/ 14 /*若無法正常3d效果，將perspective屬性提到更上一個父容器即可(此處已上提，從items-->container)*/ 15 perspective: 1000px; 16 /*讓container的偽類有過渡效果--51-54行*/ 17 /*transition: all 1s;*/ 18 } 19 .items { 20 width: 200px; 21 height: 200px; 22 border: 1px solid #c18; 23 margin: 200px auto; 24 /*指定子元素定位在三維空間內*/ 25 transform-style: preserve-3d; 26 /*讓所有item的父級元素（即items）旋轉，item就是圍繞着旋轉了*/ 27 animation: autoMove 10s infinite linear; 28 29 } 30 .item { 31 width: 200px; 32 height: 200px; 33 background-color: skyblue; 34 opacity: .6; 35 font-size: 200px; 36 line-height: 200px; 37 text-align: center; 38 position: absolute; 39 } 40 /*定義自動旋轉的動畫*/ 41 @keyframes autoMove { 42 from { } 43 to { 44 transform: rotateY(-360deg); 45 } 46 } 47 .items:hover { 48 /*鼠標移入 暫停動畫*/ 49 animation-play-state: paused; 50 } 51 .container:hover { 52 /*鼠標移入，繞Z軸旋轉90deg*/ 53 /*transform: rotateZ(90deg);*/ 54 } 55 </style> 56 <script> 57 $(function () { 58 var itemNum = $(".container .items .item").length;//要旋轉的div的數量 59 var itemDeg = 360 / itemNum;//計算平均偏移角度，后面的itemDeg*index是不同索引div的偏移角度 60 $(".items>.item").each(function (index, element) { 61 $(element).css({ 62 //給每一個item設置好位置 63 //rotateY讓每一個item繞着Y軸偏移，itemDeg*index是不同索引div的偏移角度 64 //translateZ是控制item在角度偏移后，往他們的正上方移動的距離，數值越大旋轉的范圍越大 65 transform: "rotateY(" + itemDeg * index + "deg) translateZ(280px)" 66 }); 67 }); 68 }); 69 </script> 70 </head> 71 <body> 72 <div class="container"> 73 <div class="items"> 74 <!--簡便起見，用背景色和數字代替圖片--> 75 <div class="item">1</div> 76 <div class="item">2</div> 77 <div class="item">3</div> 78 <div class="item">4</div> 79 <div class="item">5</div> 80 <div class="item">6</div> 81 </div> 82 </div> 83 </body> 84 </html>