perspective 的笔记

以前看到别人做的banner图,3d变化,很羡慕啊,一直不知道怎么做,直到看到了这个样式perspective,然后就知道怎么实现了

一个简单的例子,扫起

demo下在地址 http://files.cnblogs.com/files/wtcsy/demoxx.rar

perspective

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

注释：perspective 属性只影响 3D 转换元素。

从w3school上抄的一段话,我也是这么理解的....　　　地址 http://www.w3school.com.cn/cssref/pr_perspective.asp

看过的一些介绍perspective比较好的资料

看过的一些介绍perspective比较好的资料

http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

http://www.alloyteam.com/2012/10/the-css3-transform-perspective-property/

先理解下x,y,z轴

x就是水平方向，比如x轴方向旋转,就是设置rotateX

y就是垂直方向，比如y轴方向旋转,就是设置rotateY

z就是由电脑屏幕到人脸的那个方向，比如z轴方向旋转,就是设置rotateZ

如何理解perspective

上面的书面定义,其实也不是那么好理解,如果以一些例子来理解可能就简单很多了

先要理解透视点是在浏览器的前方

比如定义了一个div,假如叫vv吧，设置vv的perspective的样式,它的值是1200px;

然后设置vv的translateZ (前提要理解 x,y,z轴,translateX ,translateY ,translateZ 才方便理解perspective )

在translateZ(0)的时候,可以理解为vv到透视点的距离是1200px,这时他的大小(就是宽高,跟不设置perspective是一样的)

如果把vv设置成translateZ(600px),就会发现vv变大了,vv到透视点的距离就是600px了.就好像到一张纸,在你眼前1米的时候比较小,但是到了0.1米的时候比较大

当vv到了translateZ(1200px)的时候,vv就不见了,也好理解,跟眼睛在一起了,看不到了

这是张鑫旭写的例子, 直接拿过来用

http://www.zhangxinxu.com/study/201209/transform-perspective-translateZ.html

理解perspective下的旋转

如果设置只是设置了rotateX(rotateY,rotateZ)的旋转还是很好理解的,但是加上了perspective后,就难一点点了

比如设置div绕y轴方向旋转,设置了perspective为1200px,然后再设置translateZ(600px),那div就以100px的距离绕y轴旋转

我擦

如果设置div绕x轴方向旋转,设置了perspective为1200px,然后再设置translateZ(600px),那div就以100px的距离绕x轴旋转

我擦

一些demo

手机页面切换一般都一些效果可以选择，我的手机上就有这些效果,风车,方盒,旋转,翻页

方盒

就是那个二维码了

主要是通过图片宽度的一半当成translateZ,然后计算缩放的大小

旋转

这个就是rotateY,加了perspective,3d效果更好

}
            setTimeout(function(){my()},16)
        }
    });
</script>
</body>
</html>

翻页

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>wo ca!!!!!</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
<style>
    *{margin:0;padding:0;}
    body{background: #000}
    .warp{ 200px; height: 320px; margin:50px auto; padding: 20px; position: relative;  overflow: hidden;background: #000;}
    .list{ 200px; height: 320px; position: absolute;left: 20px;top: 20px;display: none;
        -webkit-perspective:1200px;
        -ms-perspective:1200px;
        -o-perspective:1200px;
        -moz-perspective:1200px;
    }   
    .list img{height: 100%;  200%;}
    .l{height: 320px;  100px; display:inline-block; overflow: hidden;
        -webkit-transform:rotateY(0deg) ;
        -ms-transform:rotateY(0deg) ;
        -o-transform:rotateY(0deg) ;
        -moz-transform:rotateY(0deg) ;
        -webkit-transform-origin:right center;
        -ms-transform-origin:right center;
        -o-transform-origin:right center;
        -moz-transform-origin:right center;
    }
    .r{height: 320px;  100px; display:inline-block;overflow: hidden;
        -webkit-transform:rotateY(0deg);
        -ms-transform:rotateY(0deg);
        -o-transform:rotateY(0deg);
        -moz-transform:rotateY(0deg);
        -webkit-transform-origin:left center;
        -ms-transform-origin:left center;
        -o-transform-origin:left center;
        -moz-transform-origin:left center;
    }
    .r>img{margin-left: -100px;}
    .curr{ z-index: 10; display: block;}
</style>
<body>
    <div id="con" class="warp">
        <div id="a0" class="list curr">
            <div class="l"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/659251/o_1.jpg" alt=""></div><div class="r"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/659251/o_1.jpg" alt=""></div>
        </div>
        <div id="a1" class="list">
            <div class="l"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/659251/o_2.jpg" alt=""></div><div class="r"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/659251/o_2.jpg" alt=""></div>
        </div>
        <div id="a2" class="list">
            <div class="l"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/659251/o_3.jpg" alt=""></div><div class="r"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/659251/o_3.jpg" alt=""></div>
        </div>
        <div id="a3" class="list">
            <div class="l"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/659251/o_4.jpg" alt=""></div><div class="r"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/659251/o_4.jpg" alt=""></div>
        </div>
    </div>
    <br>
    <div style="margin:20px auto; 200px;">
        <input type="button" value="左翻一页" onclick="xx()">　　<input type="button" value="右翻一页" onclick="yy()">
    </div>
<script src="http://files.cnblogs.com/files/wtcsy/zepto.js"></script>   
<script>
    $(function($){
        var curr = 0;
        var i=0;
        var num = 30
        var step = 90/num;
        var a1deg = 0;
        var a2deg = -90;
        function css($dom,cssNname,value){
            var obj={}
            obj["-o-"+cssNname] = value;
            obj["-webkit-"+cssNname] = value;
            obj["-moz-"+cssNname] = value;
            obj["-ms-"+cssNname] = value;
            $dom.css(obj)
        }
        window.xx = function(){
            if(i==num){
                if(curr==3){
                    curr=0;
                }else{
                    curr+=1;
                }
                i=0;
                return;
            }
            i++;
            var my = arguments.callee;
            var $currP = $("#a"+curr),
                $currL = $currP.find(".l"),
                $currR = $currP.find(".r"),
                other = curr==3?0:curr+1,
                $nextP = $("#a"+other).show(),
                $nextL = $nextP.find(".l"),
                $nextR = $nextP.find(".r");
            if(i<=15){
                //$currL.css("-webkit-transform","rotateY("+(a1deg+step*i*2)+"deg)");
                css($currL,"transform","rotateY("+(a1deg+step*i*2)+"deg)")
                if(i==15){
                    $currP.removeClass("curr").show();
                    $nextP.addClass("curr");
                    //$nextR.css("-webkit-transform","rotateY("+(-90)+"deg)");
                    css($nextR,"transform","rotateY("+(-90)+"deg)")
                }
            }else{
                //$nextR.css("-webkit-transform","rotateY("+(a2deg+step*i*2-90)+"deg)");
                css($nextR,"transform","rotateY("+(a2deg+step*i*2-90)+"deg)")
                if(i==30){
                    $currP.hide();
                    //$currL.css("-webkit-transform","rotateY("+(0)+"deg)");
                    css($currL,"transform","rotateY("+(0)+"deg)")
                }
            }
            setTimeout(function(){my()},16);
        }
        window.yy = function(){
            if(i==num){
                if(curr==0){
                    curr=3;
                }else{
                    curr-=1;
                }
                i=0;
                return;
            }
            i++;
            var my = arguments.callee;
            var $currP = $("#a"+curr),
                $currL = $currP.find(".l"),
                $currR = $currP.find(".r"),
                other = curr==0?3:curr-1,
                $nextP = $("#a"+other).show(),
                $nextL = $nextP.find(".l"),
                $nextR = $nextP.find(".r");

if(i<=15){
                //$currR.css("-webkit-transform","rotateY("+(a1deg-step*i*2)+"deg)");
                css($currR,"transform","rotateY("+(a1deg-step*i*2)+"deg)")
                if(i==15){
                    $currP.removeClass("curr").show();
                    $nextP.addClass("curr");
                    //$nextL.css("-webkit-transform","rotateY("+(90)+"deg)");
                    css($nextL,"transform","rotateY("+(90)+"deg)")
                }
            }else{
                //$nextL.css("-webkit-transform","rotateY("+(90-step*(i-15)*2)+"deg)");
                css($nextL,"transform","rotateY("+(90-step*(i-15)*2)+"deg)")
                if(i==30){
                    $currP.hide();
                    //$currR.css("-webkit-transform","rotateY("+(0)+"deg)");
                    //$currL.css("-webkit-transform","rotateY("+(0)+"deg)");
                    css($currR,"transform","rotateY("+(0)+"deg)")
                    css($nextL,"transform","rotateY("+(0)+"deg)")
                }

}
            setTimeout(function(){my()},16);                        
        }
    });
</script>
</body>
</html>

风车

}
    .list img{height: 100%;  100%;}
    .curr{
        -webkit-transform:rotateZ(0deg);
        -ms-transform:rotateZ(0deg);
        -o-transform:rotateZ(0deg);
        -moz-transform:rotateZ(0deg);
    }
</style>
<body>
    <div id="con" class="warp">
        <div id="a0" class="list curr"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/659251/o_1.jpg" alt=""></div>
        <div id="a1" class="list"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/659251/o_2.jpg" alt=""></div>
        <div id="a2" class="list"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/659251/o_3.jpg" alt=""></div>
        <div id="a3" class="list"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/659251/o_4.jpg" alt=""></div>
    </div>
    <br>
    <div style="margin:20px auto; 200px;">
        <input type="button" value="xxxx" onclick="xx()">
    </div>
<script src="http://files.cnblogs.com/files/wtcsy/zepto.js"></script>   
<script>
    $(function($){
        var curr = 0;
        var i=0;
        var num = 30
        var step = 90/num;
        var a1deg = 0;
        var a2deg = -90;
        function css($dom,cssNname,value){
            var obj={}
            obj["-o-"+cssNname] = value;
            obj["-webkit-"+cssNname] = value;
            obj["-moz-"+cssNname] = value;
            obj["-ms-"+cssNname] = value;
            $dom.css(obj)
        }       
        window.xx = function(){
            if(i==num){
                if(curr==3){
                    curr=0;
                }else{
                    curr+=1;
                }
                i=0;
                return;
            }
            i++;
            var my = arguments.callee;
            //$("#a"+curr).css("-webkit-transform","rotateZ("+(a1deg+step*i)+"deg)");
            css($("#a"+curr),"transform","rotateZ("+(a1deg+step*i)+"deg)")
            var other = curr==3?0:curr+1
            //$("#a"+other).css("-webkit-transform","rotateZ("+(a2deg+step*i)+"deg)");
            css($("#a"+other),"transform","rotateZ("+(a2deg+step*i)+"deg)")
            setTimeout(function(){my()},16)
        }
    });
</script>
</body>
</html>

一些问题

在左右滑动的时候,如何避免上下的滑动了(ps:当直接上下滑动的时候,应该让其上下滑动)

这里我用的是阻止事件默认行为,但是我看别人写的banner并不是这么写的,原理不明白?求解