console
$(function() {
var imgL = $('#wrap img').length;
var Deg = 360/imgL;
var roY = 0, roX = -10,xN,yN,play = null;
$('#wrap img').each(function(i) {
$(this).css('transform', 'rotateY('+ Deg*i +'deg) translateZ(200px)').attr('ondragstart','return false');
});
$(document).mousedown(function(ev){
clearInterval(play);
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;
})
}).mouseup(function() {
$(this).unbind('mousemove');
play = setInterval(function(){
xN *=0.95;
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 src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<div id="wrap" ondragstart='return false'>
<img src="https://img.alicdn.com/imgextra/i4/907349826/O1CN01BC3Lhl2MSMHiOowkm_!!907349826.png" ondragstart='return false'>
<img src="https://img.alicdn.com/imgextra/i4/907349826/O1CN01xnwqYC2MSMHsqsrHM_!!907349826.png" ondragstart='return false'>
<img src="https://img.alicdn.com/imgextra/i3/907349826/O1CN012zhE1B2MSMHiOp0uO_!!907349826.png" ondragstart='return false'>
<img src="https://img.alicdn.com/imgextra/i2/907349826/O1CN01E3tgmN2MSMHgMjbD9_!!907349826.jpg" ondragstart='return false'>
<img src="https://img.alicdn.com/imgextra/i3/907349826/O1CN01CEvTV02MSMEZYhcHM_!!907349826.png" ondragstart='return false'>
<img src="https://img.alicdn.com/imgextra/i4/907349826/O1CN013XVeQh2MSMEctzvxs_!!907349826.png" ondragstart='return false'>
<img src="https://img.alicdn.com/imgextra/i3/907349826/O1CN0189cNl92MSMEaf8Fke_!!907349826.png" ondragstart='return false'>
<img src="https://img.alicdn.com/imgextra/i3/907349826/O1CN0189cNl92MSMEaf8Fke_!!907349826.png" ondragstart='return false'>
<img src="https://img.alicdn.com/imgextra/i3/907349826/O1CN0189cNl92MSMEaf8Fke_!!907349826.png" ondragstart='return false'>
<img src="https://img.alicdn.com/imgextra/i3/907349826/O1CN0189cNl92MSMEaf8Fke_!!907349826.png" ondragstart='return false'>
<img src="https://img.alicdn.com/imgextra/i3/907349826/O1CN0189cNl92MSMEaf8Fke_!!907349826.png" ondragstart='return false'>
<p></p>
</div>
body{
margin: 0px;
padding: 0px;
background: #000;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#wrap{
width: 120px;
height: 180px;
margin:200px auto;
position: relative;
transform-style: preserve-3d;
-webkit-transform: perspective(800px) rotateX(-10deg) rotateY(0deg);
}
#wrap img{
width:100%;
height:100%;
position:absolute;
border-radius: 5px;
box-shadow: 0px 0px 10px #fff;
-webkit-box-reflect:below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.7));
}
#wrap p{
width:1200px;
height: 1200px;
background:-webkit-radial-gradient(center center,600px 600px,rgba(255,255,255,0.3),rgba(0, 0, 0,0));
position:absolute;
top:100%;
left: 50%;
margin-top: -595px;
margin-left: -600px;
-webkit-transform: rotateX(90deg);
}