css3 内贴图 360度环绕视角

之前经常看到有人发用css3做立方体的博文，心想如若能把视角拉到立方体里面，岂不是就能做一个环绕的视角效果了么。

今天试着做了一下，发现这个视角还真不是那么好调的，毕竟标准制定的时候应该没人想到有人会这么玩的。

chrome下显示不正常，safari下基本正常，但是景深还是有问题，仔细观察上图你会发现有扭曲~~~~

代码分享如下，求完美解决方案：（测试图片可以在相册内下载，6张）

<!doctype html>
<html>
<head>
    <title></title>
    <meta charset='utf-8' />
    <style type="text/css">
    div{margin:0;padding:0;}
    body{-webkit-perspective: 450px;-webkit-transform-style:preserve-3d;overflow:hidden;}
        .out{height:1000px;width:1000px;margin:0 auto;position:relative;  
            -webkit-animation-name:roll;
            -webkit-transform-style:preserve-3d;
            -webkit-animation-duration:0s;
            -webkit-animation-timing-function:linear;
             -webkit-animation-iteration-count:infinite;}
        @-webkit-keyframes roll{
             from {-webkit-transform:rotatey(0deg);}
                 to {-webkit-transform:rotatey(0deg);}
            }
        .out div{height:1000px;width:1000px;-webkit-transform-style:preserve-3d;position:absolute;}
        .out div:nth-of-type(1){-webkit-transform:rotateY(0deg) translateZ(-500px);background:url(a/3.jpg) 0 0 no-repeat;background-size:1000px 1000px;}

        .out div:nth-of-type(2){-webkit-transform:rotateY(90deg) translateZ(-500px);background:url(a/2.jpg) 0 0 no-repeat;background-size:1000px 1000px;}
    
        .out div:nth-of-type(3){-webkit-transform:rotateY(180deg) translateZ(-500px);background:url(a/1.jpg) 0 0 no-repeat;background-size:1000px 1000px;}
    
        .out div:nth-of-type(4){-webkit-transform:rotateY(270deg) translateZ(-500px);background:url(a/4.jpg) 0 0 no-repeat;background-size:1000px 1000px;}
    
        .out div:nth-of-type(5){-webkit-transform:rotateX(90deg) translateZ(-500px) rotatez(180deg);background:url(a/6.jpg) 0 0 no-repeat;background-size:1000px 1000px;}
        .out div:nth-of-type(6){-webkit-transform:rotateX(-90deg) translateZ(-500px) rotatez(180deg);background:url(a/5.jpg) 0 0 no-repeat;background-size:1000px 1000px;}
    </style>
</head>
<body>
    <div class='out'>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <script src='jQuery.js'></script>
    <script type="text/javascript">
    var t1=null;
var t2=null;
var t3=null;
var t4=null;
var i=0;
var j=0;
function keydown(e){        
    if(e.keyCode=='39'){
        function a(){
            if(t1)
                clearTimeout(t1);
            i++;
            $('.out').css('-webkit-transform','rotateY('+i+'deg) '+'rotatex('+j+'deg)');
            t1=setTimeout(a,30);
        }
        a();
    }
    if(e.keyCode=='37'){
        function b(){
            if(t2)
                clearTimeout(t2);
            i--;
            $('.out').css('-webkit-transform','rotateY('+i+'deg) '+'rotatex('+j+'deg)');
            t2=setTimeout(b,30);
        }    
        b();
    }
    if(e.keyCode=='38'){
        function c(){
            if(t3)
                clearTimeout(t3);
            j++;
            $('.out').css('-webkit-transform','rotateY('+i+'deg) '+'rotatex('+j+'deg)');
            t3=setTimeout(c,30);
        }
        c();
    }
    if(e.keyCode=='40'){
        function d(){
            if(t4)
                clearTimeout(t4);
            j--;
            $('.out').css('-webkit-transform','rotateY('+i+'deg) '+'rotatex('+j+'deg)');
            t4=setTimeout(d,30);
        }
        d();
    }
}
function keyup(e){
    if(e.keyCode=='39')
        clearTimeout(t1);
    if(e.keyCode=='37')
        clearTimeout(t2);
    if(e.keyCode=='38')
        clearTimeout(t3);
    if(e.keyCode=='40')
        clearTimeout(t4);
}
document.onkeydown=keydown;
document.onkeyup=keyup;
    </script>
</body>
</html>

 

posted on 2012-07-11 18:04  shawn.xie  阅读(2201)  评论(3)  编辑  收藏  举报

导航

百度流量统计：