3D旋转相册（适合新手）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了3D旋转相册（适合新手）相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html onselectstart="return false"> <head> <meta charset="utf-8"> <title>3D拖拽相册</title> <style> html,body{ width: 100%; height: 100%; overflow: hidden; cursor: url("img/sb.png"),auto; } *{ padding:0; margin:0; } body{ background: #000; } #wrap{ width:120px; height:180px; margin:150px auto; position: relative; /*3D转换*/ transform-style: preserve-3d; /*3D的一个观看视距*/ transform: perspective(800px); } #wrap img{ width:120px; height:180px; position: absolute; border-radius: 3px; box-shadow: 0 0 5px #fff; } </style> </head> <body> <div id="wrap"> <img src="http://pic1.hebei.com.cn/0/12/76/34/12763409_670435.jpg"> <img src="http://img.ivsky.com/img/tupian/img/201010/08/dongji-023.jpg"> <img src="http://www.taopic.com/uploads/allimg/110912/6438-11091201495864.jpg"> <img src="http://www.bz55.com/uploads1/allimg/120312/1_120312100435_8.jpg"> <img src="http://t1.niutuku.com/960/10/10-192927.jpg"> <img src="http://img2.3lian.com/2014/f2/164/d/20.jpg"> <img src="http://www.taopic.com/uploads/allimg/110912/6438-11091201495864.jpg"> <img src="http://pic39.nipic.com/20140226/18071023_154707834000_2.jpg"> <img src="http://www.taopic.com/uploads/allimg/121218/234734-12121Q30S562.jpg"> <img src="http://img.ivsky.com/img/tupian/img/201010/12/daziran-015.jpg"> <img src="http://img.article.pchome.net/00/26/98/56/pic_lib/wm/zjjbz2_06.jpg"> </div> </body> </html> <script> var oWrap = document.getElementById("wrap"); //在window窗口加载外成功后触发 window.onload = function(){ var oImg = oWrap.getElementsByTagName("img"); //360处于所有的img 求出一个img所占的度数 var Deg = 360 / oImg.length; //32.333 console.log(Deg) for(var i = 0; i < oImg.length; i++){ //设置每个img的旋转角度 chuan si fuo mu oImg[i].style.transform = ‘rotateY(‘+ Deg * i + ‘deg) translateZ(350px)‘; //开始拖动时触发 oImg[i].ondragstart = function(){ return false; } } var roX = 0, roY = 0; /**********************内部样式*******************************/ document.onmousedown = function(event){ //获取鼠标点击时候的坐标 x_ = event.clientX; y_ = event.clientY; //鼠标在移动时 this.onmousemove = function(event){ //获取鼠标移动时候的坐标 x = event.clientX; y = event.clientY; //获取点击和移动时候的偏移量 xN = x - x_; yN = y - y_; //增加缓动的动作 roY += xN * 0.1 ; roX -= yN * 0.1; //设置3D 元素距视图的距离为800 旋转X轴 和Y周 //perspective 3D效果的一个观看视距 oWrap.style.transform = ‘perspective(800px) rotateX(‘+ roX+‘deg) rotateY(‘+ roY+‘deg)‘; //就是获取当然动态点的坐标，为了下一次鼠标点击做参考 x_ = event.clientX; y_ = event.clientY; } this.onmouseup = function(){ this.onmousemove = null; } } } </script>
以上是关于3D旋转相册（适合新手）的主要内容，如果未能解决你的问题，请参考以下文章