效果

源码

css

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .perspective{
        position: relative;
        perspective: 6400px;
    }
    .transform-style{
        width: 800px;
        height: 800px;
        transform-style: preserve-3d;
        transform-origin: 50% 50% 200px;
        animation: run 30s linear infinite;
        margin: 50px auto;
    }
    .slide{
        position: absolute;
        width: 400px;
        height: 400px;
    }
    .top{
        left: 200px;
        top: -200px;
        transform: rotateX(-90deg);
        transform-origin: bottom;
        background: url("./img/top.jpg");
        background-size: cover;
        background-color: #47e9ff;

    }
    .bottom{
        left: 200px;
        bottom: -200px;
        transform: rotateX(90deg);
        transform-origin: top;
        background-image: url("./img/bottom.jpg");
        background-size: cover;
        background-color: #57ff96;
    }
    .left{
        left: -200px;
        top: 200px;
        transform: rotateY(90deg);
        transform-origin: right;
        background: url("./img/left.jpg");
        background-size: cover;
        background-color: #b5ff43;
    }
    .right{
        left: 600px;
        top: 200px;
        transform: rotateY(-90deg);
        transform-origin: left;
        background: url("./img/right.jpg");
        background-size: cover;
        background-color: #ffb043;
    }
    .front{
        left: 200px;
        top: 200px;
        transform: translateZ(400px);
        background: url("./img/front.jpg");
        background-size: cover;
        background-color: #ff4863;
    }
    .back{
        left: 200px;
        top: 200px;
        transform: translateZ(0);
        background: url("./img/back.jpg");
        background-size: cover;
        background-color: #a662ff;
    }


    @keyframes run {
        0% {
            transform: rotateX(0deg) rotateY(0deg);
        }
        10% {
            transform: rotateX(0deg) rotateY(180deg);
        }
        20% {
            transform: rotateX(-180deg) rotateY(180deg);
        }
        30% {
            transform: rotateX(-360deg) rotateY(180deg);
        }
        40% {
            transform: rotateX(-360deg) rotateY(360deg);
        }
        50% {
            transform: rotateX(-180deg) rotateY(360deg);
        }
        60% {
            transform: rotateX(90deg) rotateY(180deg);
        }
        70% {
            transform: rotateX(0deg) rotateY(180deg);
        }
        80% {
            transform: rotateX(90deg) rotateY(90deg);
        }
        90% {
            transform: rotateX(90deg) rotateY(0deg);
        }
        100% {
            transform: rotateX(0deg) rotateY(0deg);
        }
    }
</style>

html

<div class="perspective">
    <div class="transform-style">
        <div class="slide top"></div>
        <div class="slide bottom"></div>
        <div class="slide left"></div>
        <div class="slide right"></div>
        <div class="slide front"></div>
        <div class="slide back"></div>
    </div>
</div>