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

0 0

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

如图实现的效果，这个是在网上看的，但是我想知道这个原理是什么？因为我看了代码，没有任何注释，所以没有头绪，如果有大虾能用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>

jquery JavaScript

11 years, 11 months ago

9Crimes

9Crimes 11 years, 11 months ago

先截图：
请输入图片描述

然后直接上代码：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>

answered 11 years, 11 months ago

Arche

Arche answered 11 years, 11 months ago

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

9Crimes

Answers

Arche

Your Answer