参考博客:http://blog.csdn.net/lmj623565791/article/details/32964301
demo在chrome浏览器中测试,具体的属性在各浏览器中的兼容性各位可以自己改一下。
css属性:-webkit-transform-style: preserve-3d; 在3D空间内呈现元素
-webkit-perspective: 1200px; (谷歌)视图位置,相对元素。(火狐-moz-perspective: 800px;)
-webkit-transition: -webkit-transform 0.8s;(transition: transform 0.8s;)状态转换时间-webkit-transform: rotateY(180deg); 状态,相对Y轴转180度-webkit-backface-visibility: hidden; 图片翻转180是否yincang
动态图片不会搞。。。。。。设计思路:1.10张图片的以position:absolute;方式叠放在一起。第一张中心图片设置tranform:rotateZ(0deg)不动。,其他图片设置tranform:rotateZ(200deg)相对Z轴向外移动200deg。形成一个圆形。用js实现9张图片相对Y轴做不同角度的旋转。在代码的$(document).ready()中。到这里基本的显示已经完成。2.点击stage容器,触发click事件。全体的10张图片分别以Y轴转40度,旋转时间在transition:transform 0.8s中设置,形成动画效果。在写一个事件触发器,每隔1.5秒
触发一次stage容器的点击事件。就会形成一个连续的旋转动画。
1.html2.css<div id="stage" style="height:100px;"> <ul class="container"> <li id="stageBg"> <img src="/picture/pabupa.jpg" /> </li> <li> <img src="/picture/mojian.jpg" /> </li> <li> <img src="/picture/kuanjian.jpg" /> </li> <li> <img src="/picture/mojian.jpg" /> </li> <li> <img src="/picture/kuanjian.jpg" /> </li> <li> <img src="/picture/mojian.jpg" /> </li> <li> <img src="/picture/kuanjian.jpg" /> </li> <li> <img src="/picture/mojian.jpg" /> </li> <li> <img src="/picture/kuanjian.jpg" /> </li> <li> <img src="/picture/mojian.jpg" /> </li> </ul> </div>
3.js代码.container li { position: absolute; width: 128px; display: block; -webkit-transition: -webkit-transform 0.8s; transition: transform 0.8s; text-align: center; } .container li img { width: 100px; /*-webkit-backface-visibility: hidden;*/ } .container { margin-left: 500px; -webkit-transform-style: preserve-3d; } body { -webkit-perspective: 1200px; } #stageBg { -webkit-transform: rotateY(0deg); width: 50px; }
$(document).ready(function() { for (var i = 0; i < 10; i++) { $(".container li:not('#stage')").eq(i).css("-webkit-transform",'rotateY('+ ((40)*(i-1)) +'deg) translateZ(200px)'); } $("#stageBg").css("-webkit-transform",'rotateY(0deg)'); }) $(document).on('click',"#stage", function() { $(".container li").each(function(index, val) { var rotateY = this.style.webkitTransform; var regY = /^rotateY\((\d*)deg.*$/; var newRotate = parseInt(regY.exec(rotateY)[1]) + 40; if (newRotate > 10800) { newRotate -= 10800; } if ($(val).attr('id') == 'stageBg') { $(this).css("-webkit-transform",'rotateY('+ newRotate +'deg)'); } else { $(this).css("-webkit-transform",'rotateY('+ newRotate +'deg) translateZ(200px)'); } }) }); setInterval(function() { $('#stage').click(); },1500) //时间循环,每1.5秒转动一次
问题:我把perspective:1200.设在stage中时,图片基本显示在一条水平线上,3D效果不明显,所有我把这个属性设置在body上,不明白为什么在body上效果就会明显很多。我设置了每次rotateY在到10800+deg时,都会回到减去10800.防止数字过大出现错误。但是会有图片旋转很多圈的情况,希望大牛能够给与修改建议。