首頁 > 開發者 > JavaScript
CSS3——3D旋轉圖（跑馬燈），css3跑馬燈
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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
