transform旋转

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>

来源：CSDN

作者：想做大牛的蜗牛

链接：https://blog.csdn.net/xiaowoniuqiren/article/details/60963845