建议chorme浏览器浏览，有样式兼容性问题。
图片可以根据自己本地路径设置路径，js库引用jquery。
写的不好，多多建议，谢谢大家。
<html onselectstart="return false;"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<style type="text/css">
body {
margin: 0;
padding: 0;
} body {
background: #000;
} #wrap {
width: 120px;
height: 180px;
margin: 200px auto 0;
position: relative;
transform-style: preserve-3d;
transform: perspective(800px) rotateX(-10deg);
} #wrap img {
width: 100%;
height: 100%;
border-radius: 10px;
position: absolute;
top: 0px;
left: 0px;
box-shadow: 0 0 10px #fff;
-webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100% );
-moz-box-reflect:below 10px -moz-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100% );
}
</style>
</head> <body>
<div id="wrap">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
<img src="img/6.jpg" alt="">
<img src="img/7.jpg" alt="">
<img src="img/8.jpg" alt="">
<img src="img/9.jpg" alt="">
<img src="img/10.jpg" alt="">
<img src="img/11.jpg" alt="">
</div>
<script type="text/javascript">
$(function() {
var imgLen = $("#wrap img").size();
var rotateDeg = 360 / imgLen;
$("#wrap img").each(function(i) {
$(this).css('transform', 'rotateY(' + i * rotateDeg + 'deg) translateZ(350px)').attr('ondragstart','return false');
}); var roY = 0,roX = -10,xN,yN;
$(document).mousedown(function(ev){
var x_ = ev.clientX;
var y_ = ev.clientY;
$(this).bind('mousemove',function(ev){
var x = ev.clientX;
var y = ev.clientY; xN = x - x_;
yN = y - y_; roY += xN*0.2;
roX -= yN*0.1;
$("#wrap").css('transform','perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)');
x_ = ev.clientX;
y_ = ev.clientY;
});
});
$(document).mouseup(function(){
$(this).unbind('mousemove');
var play_ = setInterval(function(){
xN = xN*0.95;
yN = yN*0.95;
if(Math.abs(xN)<0.5 && Math.abs(yN)<0.5){
clearInterval(play_);
};
roY += xN*0.2;
roX -= yN*0.1;
$("#wrap").css('transform','perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)');
},30);
});
});
</script>
</body> </html>
直接需求代码的+qq：596023011
