SOURCE

console 命令行工具 X clear

                    
>
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)');

               // $(document.body).append('<div style="width:5px;height:5px;background:red;position:absolute;top:'+y+'px;left:'+x+'px;"></div>');
               
                    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);

            }