transform旋转

来源：互联网发布：集思宝软件编辑：程序博客网时间：2024/05/29 15:18

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>

0 0