简单的立方体

CSS

*{
                margin: 0;
                padding: 0;
            }
            @keyframes anmin{
                0%{transform: perspective(800px) rotateY(0deg) rotateX(45deg); }
                10%{transform: perspective(800px) rotateY(36deg) rotateX(45deg);}
                20%{transform: perspective(800px) rotateY(72deg) rotateX(45deg);}
                30%{transform: perspective(800px) rotateY(108deg) rotateX(45deg);}
                40%{transform: perspective(800px) rotateY(144deg) rotateX(45deg);}
                50%{transform: perspective(800px) rotateY(180deg) rotateX(45deg);}
                60%{transform: perspective(800px) rotateY(216deg) rotateX(45deg);}
                70%{transform: perspective(800px) rotateY(252deg) rotateX(45deg);}
                80%{transform: perspective(800px) rotateY(288deg) rotateX(45deg);}
                90%{transform: perspective(800px) rotateY(324deg) rotateX(45deg);}
                100%{transform: perspective(800px) rotateY(360deg) rotateX(45deg);}
            }
            .box{
                width: 200px;
                height: 200px;
                margin: 80px auto 0px;
                transform-style: preserve-3d;
                /*transform: perspective(800px) rotateY(30deg) rotateX(30deg);*/
                position: relative;
                animation: anmin 5s infinite ease-in-out;
            }
            .box>div{
                width: 100%;
                height: 100%;
                transition: all 3s ease-in-out;
                position: absolute;
                border: 1px solid saddlebrown;
                top: 0;
                left: 0;
                overflow: hidden;
            }
            .box>div>img{
                width: 100%;
                height: 100%;
            }
            .box>.one{
                transform: translateZ(100px);   
            }
            .box>.two{
                transform: translateZ(-100px);
            }
            .box>.three{
                transform: translateX(-100px) rotateY(90deg);
            }
            .box>.four{
                transform: translateX(100px) rotateY(90deg);
            }
            .box>.five{
                transform: translateY(-100px) rotateX(90deg);
            }
            .box>.six{
                transform: translateY(100px) rotateX(90deg);
            }

html

<div class="box">
            <div class="one"><img src="img/1.jpg"/></div>
            <div class="two"><img src="img/2.jpg"/></div>
            <div class="three"><img src="img/3.jpg"/></div>
            <div class="four"><img src="img/4.jpg"/></div>
            <div class="five"><img src="img/5.jpg"/></div>
            <div class="six"><img src="img/6.jpg"/></div>
</div>