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) 编辑 收藏 举报