JSFiddle - React, Tailwind, and code Playground

by DohanKwon

HTML

<div id="container">
    <div id="control">
        <div id="cube00" class="cube">
            <div class="cubie">1</div><div class="cubie">2</div><div class="cubie">3</div><div class="cubie">4</div><div class="cubie">5</div><div class="cubie">6</div>
		</div>
    </div>
</div>

CSS

#container {
    position: relative;
    top: 400px;
    left: 100px;
    
    transform: rotateX(30deg) rotateY(20deg) rotateZ(50deg) scale3d(0.5, 0.5, 0.5);
    transform-style: preserve-3d;
}

#control {
    position: absolute;
    width: 2px;
    height: 2px;
    
    border: 2px solid rgba(150, 50, 50, 0.5);
    background-color: rgba(150, 50, 50, 0.5);
    
    transform-style: inherit;
    animation: cube1 4s linear 0s;
    transform-origin: 0% 0% 0%;
}

@keyframes cube1 {
    0% { transform: rotateX(  0deg) rotateY(  0deg) rotateZ(  0deg) ; }
    25% { transform: rotateX( 90deg) rotateY(  0deg) rotateZ(  0deg) ; }
    50% { transform: rotateX( 90deg) rotateY( 90deg) rotateZ(  0deg) ; }
    75% { transform: rotateX( 90deg) rotateY( 90deg) rotateZ( 90deg) ; }
    100% { transform: rotateX( 90deg) rotateY( 90deg) rotateZ( 90deg) ; }
}

.cube {
    position: inherit;
    
    transform-style: inherit;
}
.cubie {
    position: inherit;
    width: 196px;
    height: 196px;
    
    border: 2px solid rgba(250, 250, 250, 0.9);
    border-radius: 20px;
    background-color: rgba(50, 50, 50, 0.1);
    
    transform-origin: 0% 0% 0;
    
    line-height: 200px;
    font-size: 50px;
    text-align: center;
    color: rgba(50, 50, 50, 0.1);
}
.cube > .cubie:nth-child(1) { transform: translate3d(-100px, -100px, -100px) rotate3d( 0, 0, 0, 0deg); }		
.cube > .cubie:nth-child(2) { transform: translate3d(-100px, -100px,  100px) rotate3d( 0, 1, 0, 90deg); }		
.cube > .cubie:nth-child(3) { transform: translate3d( 100px, -100px,  100px) rotate3d( 0, 1, 0, 90deg); }		
.cube > .cubie:nth-child(4) { transform: translate3d(-100px, -100px,  100px) rotate3d(-1, 0, 0, 90deg); }		
.cube > .cubie:nth-child(5) { transform: translate3d(-100px,  100px,  100px) rotate3d(-1, 0, 0, 90deg); }		
.cube > .cubie:nth-child(6) { transform: translate3d(-100px, -100px,  100px) rotate3d( 0, 0, 0, 0deg); }

#cube00 {
    transform: translate3d(0px, 0px, 0px);
}