<div class="container">

    <div> <figure></figure> <figure></figure> <figure></figure> <figure></figure> </div>

    <div><figure></figure><figure></figure><figure></figure><figure></figure></div>

    <div><figure></figure><figure></figure><figure></figure><figure></figure></div>

</div>

<style>

*{

    /* 3D 加速 */

    transform-style:preserve-3d;

}

body{

    background:black;

}

.container{

    width:200px;

    height:200px;

    position:relative;

    margin:200px auto;

    /* preserve-3d是在做3d转换的时候用到的，然后就会有Z轴的3d转换效果，

    如果不设置或者设置成flat看到的只是一个平面上的变换 */

    transform-style:preserve-3d;

}

.container div{

    width:200px;

    height:200px;

    position:absolute;

}

.container div:nth-child(1){

    transform:rotateX(90deg);

}

.container div:nth-child(2){

    transform:rotateY(90deg);

}

@keyframes rotate{

    from{

        transform: rotateY(0deg);

    }

    to{

        transform: rotateY(360deg);

    }

}

/** 每个div 有4个 figure*/

figure{

    width:100%;

    height:100%;

    margin:0;

    position:absolute;

    background:url(http://img.duoziwang.com/2016/09/02/15483442009.jpg) no-repeat;

    /**把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。**/

    background-size:cover;

}

figure:nth-child(1){

    /** 有些时候需要实现一些倒影的效果。比如说，你看到一个美女，

    你想从另一个角度来看这个MM的风姿 。  **/

    -webkit-box-reflect:above;

}

figure:nth-child(2){

    /* 下倒影, 就像走在湖面上的效果 */

    -webkit-box-reflect:below;

}

figure:nth-child(3){

    -webkit-box-reflect:left;

}

figure:nth-child(4){

    -webkit-box-reflect:right;

}

body{

    animation: rotate 2s linear infinite;

    transform-orgin:50% 200px;

}

html{

    overflow:hidden;

}

</style>

<script>

var div = document.querySelector('div');

var flag = false;// 是否启动拖拽

document.addEventListener('mousedown', function() {

    flag = true;

    document.body.style.setProperty('animation-play-state', 'paused');

}, false);

document.addEventListener('mouseup', function() {

    flag = false;

    document.body.style.setProperty('animation-play-state', 'running');

}, false);

document.addEventListener('mousemove', function move(e) {

    if (!flag) {

        move.lastX = e.x;

        move.lastY = e.y;

        return;

    }

    var transform = getComputedStyle(div).getPropertyValue('transform');

    transform == 'none' && (transform = '');

    div.style.setProperty('transform', transform + 'rotateX(' + (move.lastY - e.y) / 5 + 'deg) rotateY(' + (e.x - move.lastX) / 5 + 'deg)');

    move.lastX = e.x;

    move.lastY = e.y;

}, false);

</script>