首页 > 代码库 > CSS3——3D旋转图（跑马灯效果图）
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>
CSS3——3D旋转图（跑马灯效果图）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。