<!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>
代码来源潭州教育免费视频教程，挺好的
时间： 2024-08-14 10:27:33