JavaScript-关于JS上实现3D图片旋转的效果

发布于 2016-11-04 19:16:29 字数 5540 浏览 1297 评论 3

如图实现的效果，这个是在网上看的，但是我想知道这个原理是什么？因为我看了代码，没有任何注释，所以没有头绪，如果有大虾能用JQ写一个出来更好（要有注释兼容IE8以上）。
请输入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
body{background:url(images/bluebg.jpg)}
#show{position:relative;margin:20px auto;width:800px;border:1px solid #999999; height:600px;}
.item{position:absolute;height:90px; width:12px; border:1px solid #eeeeee;cursor:pointer; background:#999;}
.item p{ background:#000; color:#FFF;}
</style>
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script>
var len;
var showerObj;
var listObj;
var showerWidth=800;
var showerHeight=400;
var r;
var cR=0;
var ccR=0;
var timer=0;
window.onload=function(){
    $(function(){
    showerObj=document.getElementById("show");
    listObj=showerObj.getElementsByTagName("div");
    len=listObj.length;
    /*r=Math.PI/180*360/len;*/
    r=Math.PI/180*360/len;
    for(var i=0;i<len;i++){
        var item=listObj[i];
        item.style.top=showerHeight/2+Math.sin(r*i)*showerWidth/2-20+"px";
        item.style.left=showerWidth/2+Math.cos(r*i)*showerWidth/2-30+"px";
        item.rotate=(r*i+2*Math.PI)%(2*Math.PI);
        item.onclick=function(){
            cR=Math.PI/2-this.rotate;
            timer || (timer=setInterval(rotate,10));
            
        }
    
    }
    var rX=showerObj.offsetLeft+showerWidth/2;
    var ry=showerObj.offsetTop+showerHeight/2;
    
    var rotate=function(){
        ccR=(ccR+2*Math.PI)%(2*Math.PI);
        if(cR-ccR<0) cR=cR+2*Math.PI;
        if(cR-ccR<Math.PI){
            ccR=ccR+(cR-ccR)/19;
        }else{
            ccR=ccR-(2*Math.PI+ccR-cR)/19;
        
        }
        
        if(Math.abs((cR+2*Math.PI)%(2*Math.PI)-(ccR+2*Math.PI)%(2*Math.PI))<Math.PI/720){
            ccR=cR;
            clearInterval(timer);
            timer=0;
        }
        
        for(var i=0;i<len;i++){
            var item=listObj[i];
            var w,h;
            var sinR=Math.sin(r*i+ccR);
            var cosR=Math.cos(r*i+ccR);
            w=120+0.6*60*sinR;
            h=(90+0.6*40*sinR);
            item.style.cssText +=";width:"+w+"px;height:"+h+"px;top:"+parseInt(showerHeight/2+sinR*showerWidth/2/3-w/2)+"px;left:"+parseInt(showerWidth/2+cosR*showerWidth/2-h/2)+"px;z-index:"+parseInt(showerHeight/2+sinR*showerWidth/2/3-w/2)+";";
            $(".item > img").css({"width":w,"height":h});
    
        }
    }
    
    document.getElementById("l").onclick=function(){
        cR=(cR+r+2*Math.PI)%(2*Math.PI);
        timer || (timer=setInterval(rotate,10));
    }
    document.getElementById("r").onclick=function(){
        cR=(cR-r+2*Math.PI)%(2*Math.PI);
        timer || (timer=setInterval(rotate,10));
    }
    rotate();
    });
}
</script>
<!--<script>
    
        $(".item").live("click",function(i){
            var img_w =  $(".item img").parent().css("width");
            var img_h =  $(".item img").parent().css("height");
            
        });
    
</script>-->
</head>
<body>
<input id="l" type="button" value="left" >
<input id="r" type="button" value="right" >
<div id="show">
    <!--<img class="item" src="images/u0_original_04.png" />
    <img class="item" src="images/u0_original_05.png" />
    <img class="item" src="images/u0_original_06.png" />
    <img class="item" src="images/u0_original_07.png" />
    <img class="item" src="images/u0_original_08.png" />
    <img class="item" src="images/u0_original_09.png" />
    <img class="item" src="images/u0_original_10.png" />
    <img class="item" src="images/u0_original_11.png" />
    <img class="item" src="images/u0_original_12.png" />
    <img class="item" src="images/u0_original_13.png" />
    <img class="item" src="images/u0_original_14.png" />
    <img class="item" src="images/u0_original_15.jpg" />-->
    
    
    
    
    <div class="item"><p>你好1</p></div>
    <div class="item"><p>你好2</p></div>
    <div class="item"><p>你好3</p></div>
    <div class="item"><img src="images/u0_original_06.png" /></div>
    <div class="item"><img src="images/u0_original_07.png" /></div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">0</div>
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    
</div>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

甜柠檬 2017-08-14 15:04:52

也许你可以尝试用webgl实现，github上有three.js的3d引擎框架，貌似也有相应的demo

回复收藏 0

夜无邪 2017-07-16 07:56:46

先截图：

然后直接上代码：3D立方体旋转

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>3D立方体</title>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312"/>
<style type="text/css">
/*重置{*/
* { padding: 0; margin: 0; }img{border:0;}li{list-style:none;}
/*}重置*/
ul{width:200px;height:200px;margin:100px auto;position:relative;-webkit-transform-style:preserve-3d;}
/*如果在ul里设置：-webkit-perspective:400px;-webkit-perspective-origin:0% 50%; 则会有透视、景深的效果*/
li{width:200px;height:200px;position:absolute;text-align:center;line-height:200px;font-size:80px;font-weight:bold;color:#fff;}
li:nth-child(1){background:rgba(255,0,0,1);-webkit-transform:rotateX(90deg) translateZ(100px);}
li:nth-child(2){background:rgba(0,255,255,1);-webkit-transform:rotateX(270deg) translateZ(100px);}
li:nth-child(3){background:rgba(255,0,255,1);-webkit-transform:rotateY(90deg) translateZ(100px);}
li:nth-child(4){background:rgba(0,255,0,1);-webkit-transform:rotateY(270deg) translateZ(100px);}
li:nth-child(5){background:rgba(200,200,0,1);-webkit-transform:translateZ(-100px);}
li:nth-child(6){background:rgba(0,0,255,1);-webkit-transform: translateZ(100px) ;}
.button{width:200px;margin:20px auto;position:relative;}
input{width:50px;height:30px;position:absolute;cursor:pointer;}
input:nth-child(1){left:100px;top:0;}
input:nth-child(2){left:200px;top:50px;}
input:nth-child(3){left:0px;top:50px;}
input:nth-child(4){left:100px;top:100px;}
input:nth-child(5){left:100px;top:50px;}
/*****当执行下列css时，立方体无限自由旋转******/
/* ul{-webkit-animation:run 5s linear infinite ;}
@-webkit-keyframes run{
%{-webkit-transform: rotateX(0deg) rotateY(0deg) }
%{-webkit-transform:rotateX(360deg) rotateY(360deg) }
}
*/
</style>
</head>
<body>
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<div class="button">
<input type="button" value="上">
<input type="button" value="右">
<input type="button" value="左">
<input type="button" value="下">
<input type="button" value="重置">
</div>
<script type="text/javascript">

</script>
</body>
</html>