CSS3实现正方形立方体旋转

直接上代码

html结构：

<div class="box">
    <div class="right"></div>
    <div class="left"></div>
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="front"></div>
    <div class="back"></div>
    <section class="right1"></section>
    <section class="left1"></section>
    <section class="top1"></section>
    <section class="bottom1"></section>
    <section class="front1"></section>
    <section class="back1"></section>
</div>

css样式：

 *{
            padding: 0;
            margin: 0;
        }
        .box{
            position: relative;
            height: 400px;
            width: 400px;
            margin: 150px auto;
            transform-style: preserve-3d;
            animation: rotate 20s infinite linear;
            transition: all 1s;

        }
        .box div {
            width: 100%;
            height: 100%;
            position: absolute;
            opacity: 0.9;
            top: 0;
            left: 0;
            transition: all 1s;
        }
        .box section {
            width: 50%;
            height: 50%;
            position: absolute;
            /*opacity: 0.9;*/
            background-color: black;
            top:25%;
            left:25%;

        }
        .left {
            background-color: red;
            transform: rotateY(90deg) translateZ(200px);
        }
        .right {
            background-color: blue;
            transform: rotateY(90deg) translateZ(-200px);
        }
        .top {
            background-color: yellow;
            transform: rotateX(90deg) translateZ(200px);
        }
        .bottom {
            background-color: darkmagenta;
            transform: rotateX(90deg) translateZ(-200px);
        }
        .back {
            background-color: green;
            transform:translateZ(-200px);
        }
        .front {
            background-color: aqua;
            transform:translateZ(200px);
        }
        .left1 {
            /*background-color: red;*/
            transform: rotateY(90deg) translateZ(100px);
        }
        .right1 {
            /*background-color: blue;*/
            transform: rotateY(90deg) translateZ(-100px);
        }
        .top1 {
            /*background-color: yellow;*/
            transform: rotateX(90deg) translateZ(100px);
        }
        .bottom1 {
            /*background-color: darkmagenta;*/
            transform: rotateX(90deg) translateZ(-100px);
        }
        .back1 {
            /*background-color: green;*/
            transform:translateZ(-100px);
        }
        .front1 {
            /*background-color: aqua;*/
            transform:translateZ(100px);
        }
        .box:hover .left{
            transform: rotateY(90deg) translateZ(300px) rotateZ(90deg);
        }
        .box:hover .right{
            transform: rotateY(90deg) translateZ(-300px) rotateZ(90deg);
        }
        .box:hover .top{
            transform: rotateX(90deg) translateZ(300px) rotateZ(90deg);
        }
        .box:hover .bottom{
            transform: rotateX(90deg) translateZ(-300px) rotateZ(90deg);
        }
        .box:hover .back{
            transform:translateZ(-300px) rotateZ(90deg);
        }
        .box:hover .front{
            transform:translateZ(300px) rotateZ(90deg);
        }
        @keyframes rotate {
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }

            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }