你的位置:首页 > 网页设计

[网页设计]CSS3——3D旋转图(跑马灯效果图)


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>