一个css3 旋转效果 -- 待续

<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>