纯CSS3旋转正方体

首先，在一个同一个元素内显示图片的位置

	<div class="cube">
        <div class="contain"></div>
        <div class="contain"></div>
        <div class="contain"></div>
        <div class="contain"></div>
        <div class="contain"></div>
        <div class="contain"></div>
    </div>

根据每一个div元素来显示正方体的每一个面
根据transform 的 属性 rotate角度调节
1、将每一个div的背景设置为背景图片，
2、然后根据正方体的每一个面需要的角度用rotateX或者rotateY来调整
3、最后根据translateZ轴来移动图片，来组成一个正方体
4、最后用@keyframes来旋转图片的角度
代码详情如下：

 :root {
     
            height: 100%;
        }
        
        body {
     
            height: 100%;
            margin: 0;
            perspective: 800px;
            perspective-origin: center;
            transform-style: preserve-3d;
        }
        
        .cube {
     
            width: 300px;
            height: 300px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transform-style: preserve-3d;
            animation: run 3s linear infinite;
        }
        
        .contain {
     
            width: 300px;
            height: 300px;
            position: absolute;
            transform-origin: 0 0;
            opacity: 0.5;
        }
        
        .contain:nth-of-type(1) {
     
            background: url(img/07.jpg);
            background-size: cover;
            transform: rotateY(90deg);
        }
        
        .contain:nth-of-type(2) {
     
            background: url(img/02.jpg);
            background-size: cover;
            transform: rotateX(270deg);
        }
        
        .contain:nth-of-type(3) {
     
            background: url(img/08.jpg);
            background-size: cover;
            transform: rotateY(90deg) translateZ(300px);
        }
        
        .contain:nth-of-type(4) {
     
            background: url(img/04.jpg);
            background-size: cover;
            transform: rotateX(270deg) translateZ(300px);
        }
        
        .contain:nth-of-type(5) {
     
            background: url(img/05.jpg);
            background-size: cover;
            transform: rotateX(0deg);
        }
        
        .contain:nth-of-type(6) {
     
            background: url(img/06.jpg);
            background-size: cover;
            transform: rotateX(0deg) translateZ(-300px);
        }

记得必须写根节点：root 的高度
因为，如果不写跟节点，旋转时的高度会显示与定位的不相同
在元素用animation 来调用
代码如下：

@keyframes run {
     
            from {
     
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
     
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

最后一个完整的旋转的正方体就完成了

还有一个可以根据鼠标来控制正方体的旋转方向

document.body.onmousemove = function(e) {
     
 	 this.style.perspectiveOrigin = "" + e.pageX + "px " + e.pageY + "px";
}