CSS3 正方体 旋转木马动画

HTML代码

 <!--旋转木马-->
    <div class="div2">
        <div class="div1">
            <img class="pic1" src="images/1.jpg" alt="">
            <img class="pic2" src="images/2.jpg" alt="">
            <img class="pic3" src="images/3.jpg" alt="">
            <img class="pic4" src="images/4.jpg" alt="">
            <img class="pic5" src="images/5.jpg" alt="">
            <img class="pic6" src="images/6.jpg" alt="">
        </div>
    </div>
    <!--正方体-->
    <div class="div3">
        <div class="div4">
            <img class="pi1" src="images/m1.png" alt="">
            <img class="pi2" src="images/m2.jpg" alt="">
            <img class="pi3" src="images/m3.jpg" alt="">
            <img class="pi4" src="images/m4.jpg" alt="">
            <img class="pi5" src="images/m5.jpg" alt="">
            <img class="pi6" src="images/m6.jpg" alt="">
        </div>
    </div>

css部分

 body {
            background: url("images/bg4.jpg");
            background-size:cover ;
        }
        @keyframes dh {
            from{
                transform: rotateY(0deg);
            }
            to{
                transform: rotateY(360deg);
            }
        }
        @keyframes dh1 {
            from{
                transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
            }
            to{
                transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);
            }
        }
        .div2 {
            transform-style:preserve-3d;
            transform: rotateX(-10deg);
            position: fixed;
            margin-left: 500px;
            margin-top: 50px;
        }

        .div1{
            width: 300px;
            position: relative;
            transform-style:preserve-3d;
            margin: 300px auto;
            animation: dh 4s linear infinite;
        }
        .div1 img{
            width: 300px;
            height: 200px;
            position: absolute;
        }
        .pic1 { transform: rotateY(60deg) translateZ(260px);  }
        .pic2 { transform: rotateY(120deg) translateZ(260px);  }
        .pic3 { transform: rotateY(180deg) translateZ(260px);  }
        .pic4 { transform: rotateY(240deg) translateZ(260px);  }
        .pic5 { transform: rotateY(300deg) translateZ(260px);  }
        .pic6 { transform: rotateY(360deg) translateZ(260px);  }
        /*正方体*/
        .div3{
            position: fixed;
            margin-top: 126px;
            margin-left: 550px;
        }
        .div4 {
            width: 200px;
            transform-style: preserve-3d;
            animation: dh1 4s linear infinite;

        }
        .div4 img{
            width: 200px;
            height: 200px;
            position: absolute;
        }
        .pi1 { transform: rotateX(90deg) translateZ(100px) }
        .pi2 { transform: rotateX(90deg) translateZ(-100px) }
        .pi3 { transform: rotateY(90deg) translateZ(100px) }
        .pi4 { transform: rotateY(90deg) translateZ(-100px) }
        .pi5 { transform: translateZ(100px) }
        .pi6 { transform: translateZ(-100px) }