JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div id="experiment">
        <div id="cube">
                <div class="face one">

                </div>
                <div class="face two">

                </div>
                <div class="face three">

                </div>
                <div class="face four">

                </div>
                <div class="face five">

                </div>
                <div class="face six">


                </div>
        </div>
</div>

CSS

* {
    box-sizing: border-box;
}

#experiment {
      -webkit-perspective: 800;
      -webkit-perspective-origin: 90% 90%;
    }

#cube {
      position: relative;
    
    /*REMOVE AFTER*/ top: 90px;
      margin: 0 auto;
      height: 26px;
      width: 26px;
      //-webkit-transition: -webkit-transform 2s linear;
      -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: rotateX(-45deg) rotateZ(45deg) rotateY(0deg);
    }


.face {
      position: absolute;
      height: 100%;
      width: 100%;     
}

#cube .one  {
  -webkit-transform: rotateX(90deg) translateZ(13px);
}

#cube .two {
  -webkit-transform: translateZ(13px);
}

#cube .three {
  -webkit-transform: rotateY(90deg) translateZ(13px);
  border-left: 2px solid black;
    border-top: 2px solid black;
}

#cube .six:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 2px;
  width: 20%; 
  background: #fff;    
}

#cube .four {
  -webkit-transform: rotateY(180deg) translateZ(13px);
  border-top: 2px solid black;
  border-right: 2px solid black;
}

#cube .five {
  -webkit-transform: rotateY(-90deg) translateZ(13px);
}

#cube .six {
  -webkit-transform: rotateX(-90deg) translateZ(13px) rotate(180deg);
    border: 2px solid black;
  border-top: 0;
}

JavaScript

var yAngle = 1;


(function recur() {
    $('#cube').css('webkit-transform', "rotateY("+yAngle+"deg) rotateX(-45deg) rotateZ(45deg)");
        yAngle+=1;
        setTimeout(recur ,10);
})();