用HTML,CSS,JS编辑出动态立方体！

其实动态立方体用到的知识很简单，就是CSS动画加上3D的效果，这个demo对于初学CSS动画的朋友很有帮助。。。

HTML部分：

<div id="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS部分：

<style>
    #box{
        width: 200px;
	height: 200px;
	margin: 200px auto;
	position: relative;
				
	/*给父级设置3d空间*/
	transform-style: preserve-3d;
	/*设置景深*/
	/*perspective: 800px;*/
	transform: perspective(800px) rotateY(-60deg) rotateX(30deg);
	}
    #box div{
	width: 100%;
	height: 100%;
	border: 1px solid black;
	position: absolute;
	opacity: 0.7;
	}
			
    /*前面*/
    #box div:nth-child(1){
	background: palegreen;
	transform: translateZ(100px);
	}
    /*后面*/
    #box div:nth-child(2){
	background: palevioletred;
	transform: translateZ(-100px);
	}
    /*左面*/
    #box div:nth-child(3){
	background: plum;
	transform: translateX(-100px) rotateY(90deg);
        }
    /*右面*/
    #box div:nth-child(4){
	background: blue;
	transform: translateX(100px) rotateY(90deg);
        }
    /*上面*/
    #box div:nth-child(5){
	background: greenyellow;
	transform: translateY(-100px) rotateX(90deg);
	}
    /*下面*/
    #box div:nth-child(6){
	background: orangered;
	transform: translateY(100px) rotateX(90deg);
	}
    img{
	width: 200px;
	height: 200px;
	}
</style>

JS部分：

<script>
    //获取元素
    var odiv = document.querySelector('#box');
    var x =30;
    var y =-60;
    odiv.onmousedown = function(ev){
        var event = window.event || ev;
	var disy = event.clientX - y;
	var disx = event.clientY - x;
        document.onmousemove = function(ev){
            var event = window.event || ev;
	    //计算偏移角度
	    xs = event.clientY - disx;
	    ys = event.clientX - disy;
	    odiv.style.transform = 'perspective(800px)  rotateY('+ys+'deg) rotateX('+xs+'deg)';
	    }
	document.onmouseup = function(){
	    document.onmousemove = null;
	    }
	    return false;
	}
</script>

以上就是动态立方体的基本步骤，有些地方我已经注释过了，希望会对想要学习CSS动画的朋友有所帮助~