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

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

归属感 发布于 2016-11-04 字数 5604 浏览 1173 回复 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>

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

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

评论(3

甜柠檬 2017-08-14 3 楼

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

夜无邪 2017-07-16 2 楼

先截图:

然后直接上代码: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">
<!--
var ul=document.getElementById('ul');
var inputs=document.getElementsByTagName('input');
var x=0,y=0;
/////////////////////////鼠标控制
for(var i=0;i<inputs.length;i++){
inputs[i].onclick=run;
}
function run(){
ul.style.webkitTransition='-webkit-transform 3s linear'; //设置立方体变换的属性、持续时间、动画类型
if(inputs[0]==this){x+=90;}
if(inputs[1]==this){y+=90;}
if(inputs[2]==this){y-=90;}
if(inputs[3]==this){x-=90;}
if(inputs[4]==this){x=0;y=0; ul.style.webkitTransition='-webkit-transform 0.1s linear';} //当点击重置按钮时,迅速转回到初始状态。
ul.style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg)"; //变换效果(沿X轴和Y轴旋转)
}
////////////////////////键盘控制
document.addEventListener('keydown', function(e){
ul.style.webkitTransition='-webkit-transform 3s linear';
switch(e.keyCode){
case 37: y -= 90; //左箭头
break;
case 38: x += 90; //上箭头
break;
case 39: y += 90; //下箭头
break;
case 40: x -= 90; //右箭头
break;
case 13: x=0; y=0; //回车 (当回车时,迅速转回初始状态)
ul.style.webkitTransition='-webkit-transform 0.1s linear';
break;
}
ul.style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg)"; //变换效果(沿X轴和Y轴旋转)
}, false);
//-->
</script>
</body>
</html>

泛泛之交 2017-04-28 1 楼

这个可以利用jquery的插件来实现。CloudCarousel。
不好意思例子刚才给错了,还是直接上官网的地址吧,你看看,应该就是你需要的东西,官网上也有demo例子