CSS3——3D旋转图（跑马灯效果图）-唐朝资源网

CSS3新增了很多新属性，可以用很少的代码实现很酷的动画效果，但是由于对各种浏览器的兼容性不足，欢迎有特殊需求的网站。H5C3是大势所趋。之前看新闻说年底全面转H5，放弃Flash。.

本案例主要利用CSS3中的和属性来实现跑马灯效果。详细解释在代码中的注释中。

布局后渲染

添加了样式以自动旋转，并添加了鼠标以停止动画。（鼠标移入，绕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>

本站下载的源码均来自公开网络收集转发二次开发而来，若侵犯了您的合法权益，请来信通知我们1413333033@qq.com，我们会及时删除，给您带来的不便，我们深表歉意。下载用户仅供学习交流，若使用商业用途，请购买正版授权，否则产生的一切后果将由下载用户自行承担，访问及下载者下载默认同意本站声明的免责申明，请合理使用切勿商用。

THE END