JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="container">
        <div id="cube">
            <img src="images/1.png" class="face f1" />
            <img src="images/2.png" class="face f2" />
            <img src="images/3.png" class="face f3" />
            <img src="images/4.png" class="face f4" />
            <img src="images/5.png" class="face f5" />
            <img src="images/6.png" class="face f6" />
        </div>
        <!--close cube-->
    </div>
    <!--close container-->
</body>

CSS

#container {
    perspective:800;
    perspective-orign:50% 110px;
    -webkit-perspective:800;
    -webkit-perspective-orign:50% 110px;
}
#cube {
    position:relative;
    margin:0 auto;
    height:400px;
    -webkit-transform:transform 8s linear;
    -webkit-transform-style: preserve-3d;
    -webkit-transform:rotateY(-45deg);
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
}
#cube:hover {
    -webkit-transform:rotateY(360deg);
    -webkit-transform:rotateX(360deg);
}
@keyfremes myRotate {
    from {
        left:100;
    }
    to {
        left:100;
    }
}
.face {
    position:absolute;
    height:360px;
    width:360px;
    padding:20px;
    background-color:rgba(50, 50, 50, 0.7)
}
#cube .f1 {
    -webkit-transform:rotateX(90deg) translateZ(200px);
}
#cube .f2 {
    -webkit-transform:translateZ(200px);
}
#cube .f3 {
    -webkit-transform:rotateY(90deg) translateZ(200px);
}
#cube .f4 {
    -webkit-transform:rotateY(180deg) translateZ(200px);
}
#cube .f5 {
    -webkit-transform:rotateY(90deg) translateZ(200px);
}
#cube .f6 {
    -webkit-transform:rotateX(90deg) translateZ(200px) rotate(180deg);
}