html:
    （1）用cube总容器，装载六个div容器分别装下图片

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <link rel="stylesheet" href="../css/reset.css">
    9.     <link rel="stylesheet" href="../css/124复仇者联盟.css">
    11. </head>
    12. <body>
    13.     <div class="cube">
    14.         <div class="box1">
    15.             <img src="../img/1.jpg" alt="">
    16.         </div>
    18.         <div class="box2">
    19.             <img src="../img/2.jpg" alt="">
    20.         </div>
    22.         <div class="box3">
    23.             <img src="../img/3.jpg" alt="">
    24.         </div>
    26.         <div class="box4">
    27.             <img src="../img/4.jpg" alt="">
    28.         </div>
    30.         <div class="box5">
    31.             <img src="../img/5.jpg" alt="">
    32.         </div>
    34.         <div class="box6">
    35.             <img src="../img/6.jpg" alt="">
    36.         </div>
    37.     </div>
    39. </body>
    40. </html>

    css:
    （1）要给html写上，perspective: 800px; 写上视距
    （2）给总容器cube,旋转时使用transform-style: preserve-3d;否者旋转时，只有单个图片的2d，无法看出图片旋转
    （3）给所有的.cube>div,设置大小，为了使所有图片叠在一块，设置position: absolute;
    （4）设置图片img,因为有margin统一设置，所以会设不到一块，vertical-align: top;
    （5）设置.box1 ,transform: ;设置rotateY(0deg)；绕着Y轴旋转上去，然后沿着Z轴移动100px;因为旋转一面之后，轴也会发生变化，剩下的同理
    （6）@keyframe pic {} 设置旋转的起始位置

    html {
    perspective: 800px;
}

.cube {
    width: 200px;
    height: 200px;
    margin: 100px auto;
    transform-style: preserve-3d;
    animation: pic 4s linear infinite ;
}

.cube>div {
    position: absolute;
    opacity: 0.7;
    width: 200px;
    height: 200px;
}

img {
    vertical-align: top;
}

.box1 {
    transform: rotateY(90deg) translateZ(100px);
}

.box2 {
    transform: rotateY(-90deg) translateZ(100px);
}

.box3 {
    transform: rotateX(90deg) translateZ(100px);
}

.box4 {
    transform: rotateX(-90deg) translateZ(100px);
}

.box5 {
    transform: rotateX(180deg) translateZ(100px);
}

.box6 {
    transform: rotateX(0deg) translateZ(100px);
}

@keyframes pic{
    from {
        transform: rotateX(0) rotateZ(0);
    }
    to {
        transform: rotateX(360deg) rotateZ(360deg);
    }
}

    image.png