标签：
<!doctype html> <html onselectstart="return false"><!-- 左键框选图片失效 --> <head> <meta charset="UTF-8"> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> *{margin:0;padding:0;} body{background:#000;} #wrap{width:130px;height:180px;margin:100px auto;position:relative; -webkit-transform-style: preserve-3d; -webkit-transform:perspective(800px) rotatex(-10deg); } #wrap img{position:absolute;top:0px;left:0px;width:100%;height:100%;border-radius:5px;box-shadow:0 0 10px #fff; transform:rotatey(10deg); -ms-transform:rotatey(10deg); /* IE 9 */ -moz-transform:rotatey(10deg); /* Firefox */ -webkit-transform:rotatey(10deg); /* Safari,Chrome,Maxthon*/ -o-transform:rotatey(10deg); /* Opera */ } </style> </head> <body > <div id="wrap" > <img src="images/1.jpg" /> <img src="images/2.jpg" /> <img src="images/3.jpg" /> <img src="images/4.jpg" /> <img src="images/5.jpg" /> <img src="images/6.jpg" /> <img src="images/7.jpg" /> <img src="images/8.jpg" /> <img src="images/9.jpg" /> <img src="images/10.jpg" /> <img src="images/11.jpg" /> </div> <script type="text/javascript" src="js/jquery-1.11.3.min.js" > </script> <script type="text/javascript"> $(function(){ var rotatX=-10; var rotatY=0;//初始旋转角度 var Deg=360/$("#wrap img").size(); $("#wrap img").each(function(i){//遍历每一张图片 $(this).css({"transform":"rotatey("+Deg*i+"deg)translateZ(350px) " }).attr("ondragstart","return false" ).hover(function(){ $(this).css({"transform":"rotatey("+Deg*i+"deg)translateZ(350px) scale(1.2)"}); },function(){ $(this).css({"transform":"rotatey("+Deg*i+"deg)translateZ(350px)"}); });//translateZ沿z轴撑开350px }); $(document).mousedown(function(ev){ var x0=ev.clientX; var y0=ev.clientY; $(this).bind("mousemove",function(ev){ var x1=ev.clientX; var y1=ev.clientY; var xx=x1-x0; var yy=y1-y0; rotatX+=xx*0.2; rotatY-=yy*0.2; $("#wrap").css({ "transform":"perspective(800px) rotatex("+rotatY+"deg) rotatey("+rotatX+"deg)" }); x0=ev.clientX; y0=ev.clientY; }).mouseup(function(ev){ $(this).unbind("mousemove"); }); }); }); </script> </body> </html>
代码来源潭州教育免费视频教程，挺好的
标签：
原文地址：http://www.cnblogs.com/tianyang01/p/5628546.html
