JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div id="cube">
    <div class="front">Неужели</div>
    <div class="back">через</div>
    <div class="right">css</div>
    <div class="left">получается</div>
    <div class="top">совсем</div>
    <div class="bottom">криво</div>
  </div>
</div>

CSS

body {
  padding-left: 30%;
  padding-top: 5%;
}

.container {
  width: 200px;
  height: 200px;
  position: relative;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
}

#cube {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  -webkit-animation: rotatecube 10s infinite;
  
  -moz-transform-style: preserve-3d;
  -moz-animation: rotatecube 10s infinite;
}

#cube div {
  width: 200px;
  height: 200px;
  display: block;
  position: absolute;
  border: none;
  line-height: 200px;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
}

@-webkit-keyframes rotatecube {
  0% { -webkit-transform: rotateX(0deg) rotateY(360deg) rotateZ(90deg); }
  25% { -webkit-transform: rotateX(90deg) rotateY(270deg) rotateZ(180deg); }
  50% { -webkit-transform: rotateX(180deg) rotateY(180deg) rotateZ(0deg); }
  75% { -webkit-transform: rotateX(270deg) rotateY(90deg) rotateZ(360deg); }
  100% { -webkit-transform: rotateX(360deg) rotateY(0deg) rotateZ(270deg); }
}

@-moz-keyframes rotatecube {
  0% { -moz-transform: rotateX(0deg) rotateY(360deg) rotateZ(90deg); }
  25% { -moz-transform: rotateX(90deg) rotateY(270deg) rotateZ(180deg); }
  50% { -moz-transform: rotateX(180deg) rotateY(180deg) rotateZ(0deg); }
  75% { -moz-transform: rotateX(270deg) rotateY(90deg) rotateZ(360deg); }
  100% { -moz-transform: rotateX(360deg) rotateY(0deg) rotateZ(270deg); }
}

.front {
  background: rgba(255,0,0,.5);
}

.back {
  background: rgba(0,255,0,.5);
}

.right {
  background: rgba(0,0,255,.5);
}

.left {
  background: rgba(0,255,255,.5);
}

.top {
  background: rgba(255,0,255,.5);
}

.bottom {
  background: rgba(255,255,0,.5);
}

#cube .front  {
  -webkit-transform: rotateY(0deg ) translateZ( 100px );
  -moz-transform: rotateY( 0deg ) translateZ( 100px );
}
#cube .back {
  -webkit-transform: rotateX( 180deg ) translateZ( 100px );
  -moz-transform: rotateX( 180deg ) translateZ( 100px );
}
#cube .right  {
  -webkit-transform: rotateY(  90deg...