css3 中有3D效果
俯视图，我想写一个图片旋转的效果，五个图片组成五边形
如何组成这样的图形 角度：算出每个图片的旋转角度，使用 .child{ transform: rotateY(0deg) translateZ(800px); backface-visibility: hidden; } .parent{ perspective: 10000px; }perspective：是透视，视角！可以看成屏幕中一个点，到屏幕的距离就是10000px
rotateY(0deg)：在Y轴旋转（显示中钢管舞就是Y轴旋转），这样就可以将五个图片以不同的方位放好
translateZ(800px)：要结合perspective属性，也就是translateZ的值越接近perspective的值，那么图片就会越大，越小图片越小，合理的调整这两个值
backface-visibility: 3D中如果在背面，有可能正面也会显示，就有一种透视的效果，所以在子元素中增加这个属性，就不会看到背面的元素；
注意：perspective是使用在要旋转的父元素上面，translateZ使用在子元素上面
如何旋转 上面的元素框架搭建好了之后，旋转就使用JS来控制，可以控制其父元素的rotateY(0deg) .parent{ transform: perspective(1000px) rotateX(0deg) rotateY(0deg); }rotateY:调整这个父元素的Y数值，就可以实现旋转，旋转的角度怎么可以根据
ratateY ＝ 360/子元素个数是根据按钮还是自动旋转就看自己的需求
遇到的问题 1、JQ设置css样式中有兼容性的怎么书写？（有待检测） 答： $(this).css({ '-webkit-transform':function(){"rotateY("+i*sNum+"deg) translateZ(875px)"}, 'transform':function(){ return "rotateY("+i*sNum+"deg) translateZ(875px)"}, '-moz-transform':function(){"rotateY("+i*sNum+"deg) translateZ(875px)"}, '-o-transform':function(){"rotateY("+i*sNum+"deg) translateZ(875px)"}, });2、五边形在第三和第四个旋转过程中，不是直接过渡，而是反方向旋转（火狐）？ 答： 上一次动画完成之后再执行下一次。 一开始我以为是兼容问题，后来反复测试发现，由于只有五个2 － 3，还没有完全移动完毕，就点击到 4，也就是直接从2到4。经过三个图片，那么反方向经过 1、5也可以到4。 所以测试是由于点击太快，可以增加时间戳，运动完成之后再下一次运动（目前我的解决方案）。
我的个人代码
html代码
<div class="learn-Q-wrap"> <div><p class=" text-right">目录：<span class="now-learn">1</span>/<span class="all-learn">1</span> </p></div> <div class="knowledge-bg-img"> <ul class="know-tran"> <li class="knowledge-bg " > </li> <li class="knowledge-bg " > </li> <li class="knowledge-bg "> </li> <li class="knowledge-bg "> </li> <li class="knowledge-bg " > </li> </ul> </div> <div class="Q-tra" > <a class="btn m-r-50" id="per" disabled="disabled">上一题</a> <a class="btn btn-blue-142 " id="next">已了解，下一题</a> </div> </div>css代码
.learn-Q-wrap{ background: #FFFFFF; border: 1px solid #DBE0E4; box-shadow: 0 1px 1px 0 rgba(0,0,0,0.04); padding: 100px 100px 83px; position: relative; margin-bottom: 100px; } .know-tran{ transform: perspective(1111110px) rotateX(0deg) rotateY(0deg); transform-style: preserve-3d; position: relative; transition: all 1.5s; -moz-transition: all 1.5s; /* Firefox 4 */ -webkit-transition: all 1.5s; /* Safari 和 Chrome */ -o-transition: all 1.5s; } .knowledge-bg{ /*transform-style: preserve-3d;*/ background:url("../images/learn/learn-15.png") no-repeat; height: 366px; width: 980px; position: absolute; backface-visibility: hidden; /*overflow: hidden;*/ } .knowledge-bg-img{ height: 366px; width: 980px; position: relative; overflow: hidden; }JS 代码
<script> // 试题页面翻页效果，使用css 3D效果 $(document).ready(function(){ var num = 0; // 获取一共几道试题 var liLeg=$('.knowledge-bg').length; var sNum = 360/liLeg; //每个试题的翻转角度 var nowLearn = 1; // 目录显示 var time = new Date(); //防治点击时间过快，在火狐浏览器中旋转方向会乱 var oldTime = 0; $('.all-learn').text(liLeg); $(".know-tran li").each(function(i){ //图片的旋转角度 translateZ如果是0，图片会在同一位置，像书打开一样 使用页数控制旋转角度 $(this).css({ '-webkit-transform':function(){"rotateY("+i*sNum+"deg) translateZ(875px)"}, 'transform':function(){ return "rotateY("+i*sNum+"deg) translateZ(875px)"}, '-moz-transform':function(){"rotateY("+i*sNum+"deg) translateZ(875px)"}, '-o-transform':function(){"rotateY("+i*sNum+"deg) translateZ(875px)"}, }); }); $('#next').click(function(){ time = new Date(); if(time-oldTime>1500){ oldTime =time; // 如果disabled点击，if判断之后直接跳出方法，不执行后面 if($(this).attr('disabled')){return false;} num = num - sNum; // 当前目录页数显示 nowLearn =nowLearn + 1; $('.now-learn').text(nowLearn); $('#per').removeAttr('disabled'); if(num%(sNum*(liLeg-1)) ==0){ $('#next').attr('disabled','disabled'); }; $('.know-tran').css({ 'transform':function(){return "perspective(1111110px) rotateX(0deg) rotateY(" + num + "deg)"}, '-moz-transform':function(){return "perspective(1111110px) rotateX(0deg) rotateY(" + num + "deg)"}, '-webkit-transform':function(){return "perspective(1111110px) rotateX(0deg) rotateY(" + num + "deg)"}, '-o-transform':function(){return "perspective(1111110px) rotateX(0deg) rotateY(" + num + "deg)"}}); // console.log(num); } }); $('#per').click(function(){ time = new Date(); if(time-oldTime>1500){ oldTime =time; // 如果disabled点击，if判断之后直接跳出方法，不执行后面 if($(this).attr('disabled')){return false;} num = num + sNum; // 当前目录页数显示 nowLearn =nowLearn - 1; $('.now-learn').text(nowLearn); $('#next').removeAttr('disabled'); $('.know-tran').css({ 'transform':function(){return "perspective(1111110px) rotateX(0deg) rotateY(" + num + "deg)"}, '-moz-transform':function(){return "perspective(1111110px) rotateX(0deg) rotateY(" + num + "deg)"}, '-webkit-transform':function(){return "perspective(1111110px) rotateX(0deg) rotateY(" + num + "deg)"}, '-o-transform':function(){return "perspective(1111110px) rotateX(0deg) rotateY(" + num + "deg)"}}); if(num==0){$(this).attr('disabled','disabled'); return false;} } }); }); </script>