旋转 3d
Posted Z&K
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了旋转 3d相关的知识，希望对你有一定的参考价值。
建议chorme浏览器浏览，有样式兼容性问题。
图片可以根据自己本地路径设置路径，js库引用jquery。
写的不好，多多建议，谢谢大家。
1 <html onselectstart="return false;"> 2 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> 7 <style type="text/css"> 8 body { 9 margin: 0; 10 padding: 0; 11 } 12 13 body { 14 background: #000; 15 } 16 17 #wrap { 18 width: 120px; 19 height: 180px; 20 margin: 200px auto 0; 21 position: relative; 22 transform-style: preserve-3d; 23 transform: perspective(800px) rotateX(-10deg); 24 } 25 26 #wrap img { 27 width: 100%; 28 height: 100%; 29 border-radius: 10px; 30 position: absolute; 31 top: 0px; 32 left: 0px; 33 box-shadow: 0 0 10px #fff; 34 -webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100% ); 35 -moz-box-reflect:below 10px -moz-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100% ); 36 } 37 </style> 38 </head> 39 40 <body> 41 <div id="wrap"> 42 <img src="img/1.jpg" alt=""> 43 <img src="img/2.jpg" alt=""> 44 <img src="img/3.jpg" alt=""> 45 <img src="img/4.jpg" alt=""> 46 <img src="img/5.jpg" alt=""> 47 <img src="img/6.jpg" alt=""> 48 <img src="img/7.jpg" alt=""> 49 <img src="img/8.jpg" alt=""> 50 <img src="img/9.jpg" alt=""> 51 <img src="img/10.jpg" alt=""> 52 <img src="img/11.jpg" alt=""> 53 </div> 54 <script type="text/javascript"> 55 $(function() { 56 var imgLen = $("#wrap img").size(); 57 var rotateDeg = 360 / imgLen; 58 $("#wrap img").each(function(i) { 59 $(this).css(\'transform\', \'rotateY(\' + i * rotateDeg + \'deg) translateZ(350px)\').attr(\'ondragstart\',\'return false\'); 60 }); 61 62 var roY = 0,roX = -10,xN,yN; 63 $(document).mousedown(function(ev){ 64 var x_ = ev.clientX; 65 var y_ = ev.clientY; 66 $(this).bind(\'mousemove\',function(ev){ 67 var x = ev.clientX; 68 var y = ev.clientY; 69 70 xN = x - x_; 71 yN = y - y_; 72 73 roY += xN*0.2; 74 roX -= yN*0.1; 75 $("#wrap").css(\'transform\',\'perspective(800px) rotateX(\'+roX+\'deg) rotateY(\'+roY+\'deg)\'); 76 x_ = ev.clientX; 77 y_ = ev.clientY; 78 }); 79 }); 80 $(document).mouseup(function(){ 81 $(this).unbind(\'mousemove\'); 82 var play_ = setInterval(function(){ 83 xN = xN*0.95; 84 yN = yN*0.95; 85 if(Math.abs(xN)<0.5 && Math.abs(yN)<0.5){ 86 clearInterval(play_); 87 }; 88 roY += xN*0.2; 89 roX -= yN*0.1; 90 $("#wrap").css(\'transform\',\'perspective(800px) rotateX(\'+roX+\'deg) rotateY(\'+roY+\'deg)\'); 91 },30); 92 }); 93 }); 94 </script> 95 </body> 96 97 </html>
直接需求代码的+qq：596023011
以上是关于旋转 3d的主要内容，如果未能解决你的问题，请参考以下文章