SOURCE

<div class="cube">
        <div class="plane plane1">1</div>
        <div class="plane plane2">2</div>
        <div class="plane plane3">3</div>
        <div class="plane plane4">4</div>
        <div class="plane plane5">5</div>
        <div class="plane plane6">6</div>
    </div>
    <div class="hover"></div>

.cube {
    margin: 200px;
    /* perspective: 1000px; */
    transform-style: preserve-3d;
    /* transform: rotate3d(1, 1, 1, -45deg); */
    /* animation-name: cube; */
    /* animation-duration: 5s; */
    /* animation-timing-function: ease-in; */
    /* animation-direction: alternate; */
    animation: alternate infinite cube 900ms;
}

.plane {
    position: absolute;
    left: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background-color: mediumaquamarine;
    opacity: 0.5;
    text-align: center;
    line-height: 200px;
    font-size: 130px;
}

.plane4 {
    /* transform: rotateY(-90deg) translateY(100px); */
    transform: translateZ(100px);
    background-color: rgba(119, 28, 204);
}

.plane1 {
    transform: translateZ(-100px);
    background-color: olive;
}

.plane2 {
    transform: rotateY(-90deg) translateZ(-100px);
    background-color: aqua;
}

.plane3 {
    transform: rotateY(-90deg) translateZ(100px);
    background-color: #abcdef;
}
.plane5 {
    transform: rotateX(-90deg) translateZ(-100px);
    background-color: #0f0;
}
.plane6 {
    transform: rotateX(-90deg) translateZ(100px);
    background-color: #f00;
}

@keyframes cube {
    0% {
        transform: rotate3d(1, 1, 1, -45deg);
    }

    100% {
        transform: rotate3d(1, 1, 1, -120deg);
    }
}