首页 / CSS3 / CSS33D旋转图（跑马灯效果图）

CSS33D旋转图（跑马灯效果图）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS33D旋转图（跑马灯效果图），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3320字，纯文字阅读大概需要5分钟。

内容图文

CSS3新增了很多新的属性，可以用很少的代码实现炫酷的动画效果，但由于兼容性各浏览器的能力存在不足，有特别需求的网站就呵呵啦。H5C3已是大势所趋了，之前看过一个新闻，Chrome将在年底全面转向H5，抛弃了Flash。。

本案例主要使用了CSS3中的变换transform和动画animation属性，实现了跑马灯效果，详细的解释在代码中的注释中。

做好布局之后的效果图

CSS33D旋转图（跑马灯效果图） - 文章图片

　　添加了animation样式，实现自动旋转，并且鼠标移入，停止动画。（鼠标移入，绕Z轴旋转90度）

CSS33D旋转图（跑马灯效果图） - 文章图片

代码：

 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>

内容总结

以上是互联网集市为您收集整理的CSS33D旋转图（跑马灯效果图）全部内容，希望文章能够帮你解决CSS33D旋转图（跑马灯效果图）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/394720.html

来源：【匿名】