<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>3D旋转</title> <style type="text/css"> *{margin:0;padding:0;} body{ background:#222; perspective:800px;/*景深*/ } #wrap{ position:relative; width:120px; height:180px; margin:auto; transform-style:preserve-3d;/*设置3D环境*/ } #wrap img{ position:absolute; width:133px; height:200px; box-shadow:0 0 10px #000; /*倒影:朝向 偏移*/ -webkit-box-reflect:below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100%); border-radius:5px;/*圆角*/ /* transform:rotateY(0deg) translateZ(0px); */ /*transition:1s 1s;动画执行的时间 动画延迟的时间*/ } #wrap p{ position:absolute; left:50%; top:112%; margin-left:-600px; margin-top:-600px; width:1200px; height:1200px; border-radius:50%; background:-webkit-radial-gradient(center center,600px 600px,rgba(122,122,122,0.2),rgba(0,0,0,0)); transform:rotateX(90deg); } </style> </head> <body> <div id="wrap"> <img src="images/1.jpg" alt="" /> <img src="images/2.jpg" alt="" /> <img src="images/3.jpg" alt="" /> <img src="images/4.jpg" alt="" /> <img src="images/5.jpg" alt="" /> <img src="images/6.jpg" alt="" /> <img src="images/7.jpg" alt="" /> <img src="images/8.jpg" alt="" /> <img src="images/9.jpg" alt="" /> <img src="images/10.jpg" alt="" /> <img src="images/11.jpg" alt="" /> <p></p> </div> <script type="text/javascript"> var oWrap = document.getElementById("wrap"); var aImg = oWrap.getElementsByTagName("img"); //让盒子自适应的垂直居中 function mTop(){ //获取浏览器窗口可视区域的高度 var H = document.documentElement.clientHeight; oWrap.style.marginTop = H/2 - 180 + "px" } mTop(); window.onresize = mTop; //图片初始动画 var len = aImg.length;//获取图片的个数 var Deg = 360/len;//每一张图片所占的角度 for (var i=0;i<len;i++ ) { aImg[i].style.transform = "rotateY("+i*Deg+"deg) translateZ(350px)"; aImg[i].style.transition = "1s "+(len-1-i)*0.1+"s"; } //鼠标事件(按下 移动 抬起) 拖拽旋转 var lastX,lastY,nowX,nowY,minX,minY,roX=0,roY=0,timer; document.onmousedown = function(ev){ clearInterval(timer); var ev = ev||window.event; //获取鼠标按下去的坐标位置 lastX = ev.clientX; lastY = ev.clientY; this.onmousemove = function(ev){ var ev = ev||window.event; //移动过程中鼠标的坐标位置 nowX = ev.clientX; nowY = ev.clientY; //计算出鼠标坐标的差值 minX = nowX - lastX; minY = nowY - lastY; //计算容器旋转的角度 roY += minX*0.2;//roY = roY + minX*0.2 roX -= minY*0.1; //console.log(roX,roY); //让整个图片容器跟随鼠标动 oWrap.style.transform = "rotateX("+roX+"deg) rotateY("+roY+"deg)"; lastX = nowX; lastY = nowY; } this.onmouseup = function(){ this.onmousemove = null; this.onmouseup = null; timer = setInterval(function(){ minX *=0.95;//让minX逐渐减小 minY *=0.95; roY += minX*0.2; roX -= minY*0.1; oWrap.style.transform = "rotateX("+roX+"deg) rotateY("+roY+"deg)"; //当minX达到足够小的值时 清楚定时器 if (Math.abs(minX)<0.1 && Math.abs(minY)<0.1) { clearInterval(timer); } },1000/60); } return false;//阻止默认事件 } </script> </body> </html>
评论抢沙发