html代码：




   
   





   




css3 代码： * {
    margin: 0;
    padding: 0;
}

/*背景 {MOD}径向渐变*/


html {
    background: radial-gradient(#2A7E20, #215F11, #233C0A);
    width: 100%;
    height: 100%
}








/*展示舞台*/


.stage {
    perspective: 1000px;
    height: 20em;
    width: 20em;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -10em;
    margin-top: -10em;
}






/*魔方*/


.cube {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    /*视角*/
    transform: rotateX(-20deg) rotateY(-20deg);
}


.cube div {
    background: linear-gradient(rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);
    /*浏览器兼容性有问题*/
    /*background: -webkit-linear-gradient(left,rgba(54,226,248,0.5) 0px,rgba(54,226,248,0.5) 3px,rgba(0,0,0,0) 0px,-webkit-linear-gradient(top,rgba(54,226,248,0.5) 0px,rgba(54,226,248,0.5) 3px,rgba(0,0,0,0) 0px);*/
    background-size: 5em 5em;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(54, 226, 248, 0.5);
    box-shadow: 0 0 5em rgba(0, 128, 0, 0.4);
}


.front {
    transform: translateZ(10em);
}


.back {
    transform: translateZ(-10em);
}


.left {
    transform: rotateY(-90deg) translateZ(10em);
}


.right {
    transform: rotateY(90deg) translateZ(10em);
}


.top {
    transform: rotateX(90deg) translateZ(10em);
}


.bottom {
    transform: rotateX(-90deg) translateZ(10em);
}




/*定义动画帧*/


@keyframes spin {
    from {
        transform: translateZ(-10em) rotateX(0) rotateY(0);
    }
    /*初始位置*/
    to {
        transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
    }
    /*结束位置*/
}




/*动画*/


.Animation-spin {
    animation: spin 6s ease-in-out infinite;
}