首页 > > 网页制作 > css >

CSS3——3D旋转图（跑马灯效果图）

2018-06-24 00:17:02来源：未知阅读 ()

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>