JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="second_slider_cube wow fadeIn">
      <div class="wrapper">
        <div class="cube">
          <b class="front" data-side="4" style="background: url(img/01-Front.png) no-repeat; background-size: contain; background-position: center;">
          </b>
          <b class="back" data-side="2"  style="background: url(img/01-Front.png) no-repeat; background-size: contain; background-position: center;">
          </b>
          <b class="left" data-side="1"  style="background: url(img/01-Front.png) no-repeat; background-size: contain; background-position: center;">
          </b>
          <b class="right" data-side="3"  style="background: url(img/01-Front.png) no-repeat; background-size: contain; background-position: center;"></b>
          <i class="front" data-innerSide="4" style="background: url(img/01-back.png) no-repeat; background-size: contain; background-position: center;">
          </i>
          <i class="back" data-innerSide="2" style="background: url(img/01-back.png) no-repeat; background-size: contain; background-position: center;"></i>
          <i class="left" data-innerSide="1"  style="background: url(img/01-back.png) no-repeat; background-size: contain; background-position: center;"></i>
          <i class="right" data-innerSide="3"  style="background: url(img/01-back.png) no-repeat; background-size: contain; background-position: center;"></i>
        </div>
      </div>
    </div>

CSS

div.second_slider_cube {
	position: absolute;
  top: 20px;
  left: 100px;
	/*transform: scale(1.2);*/
}




/* keyframes for rotating animation */
/*@-webkit-keyframes spin {
  25% { transform: rotateY(90deg); }
  50% { transform: rotateY(0deg); }
  75% { transform: rotateY(90deg); }
  100% { transform: rotateY(0deg); }  
}
@-webkit-keyframes opacity {
  50% { opacity: 0; }
  100% { opacity: 1; } 
}*/

/* scene wrapper */
div.second_slider_cube .wrapper{
  height: 300px;
  position:relative;
  perspective: 800;
  perspective-origin: 50% 100px;
}

/* cube wrapper */
div.second_slider_cube .cube{
  position: relative;
  margin: 0 auto;
  width: 320px;
  transform-style: preserve-3d;
  animation: spin 5s infinite ease-out;
  transition: all 1.5s cubic-bezier(0.51, 0.01, 0.24, 1);
  transform: rotateY(270deg);
}

/* outer cube */
div.second_slider_cube b {
  position:absolute;
  width: 320px;
  height: 240px;
  display:block;
  font-size:20px;
  text-align:center;
  line-height:200px;
  color:rgba(0,0,0,0.5);
  font-family:sans-serif;
  text-transform:uppercase;
  transition: all 1s ease-out;
  opacity: 1;
  border: 1px solid black;
}
div.second_slider_cube b.back{
  transform: translateZ(-160px) rotateY(180deg);
}
div.second_slider_cube b.right{
  transform:rotateY(-270deg) translateX(160px);
  transform-origin: top right;
}
div.second_slider_cube b.left{
  transform:rotateY(270deg) translateX(-160px);
  transform-origin: center left;
}
div.second_slider_cube b.top{
  transform:rotateX(-90deg) translateY(-160px);
  transform-origin: top center;
}
div.second_slider_cube b.bottom{
  transform:rotateX(90deg) translateY(160px);
  transform-origin: bottom center;
}
div.second_slider_cube b.front{
  transform: translateZ(160px);
}

/* inner cube */
div.second_slider_cube i{
  position:absolute;
  top: 0px;
  left: 20px;
  width: 280px;
  height: 240px;
  display:block;
  background: red;
  transition: all 1s ease-out;
  opacity: 1;
  border: 1px solid red;
 ...