JSFiddle - React, Tailwind, and code Playground

by willemvb

HTML

<div class="container">
  <div class="rotor prism">
    <div class="face front">
      <pre>front</pre>
        <div class="face top">
            <div class="face back">
                <div class="face bottom"></div>
            </div>
        </div>
    </div>
  </div>
</div>

CSS

.container {
  margin: 50px;
  border: 2px solid #00f;
  height: 50px; 
  position: relative;
  -webkit-perspective: 500px;
}

.rotor {
  -webkit-transform-style: preserve-3d;
  -webkit-transform: translateZ(-25px);
  -webkit-transform-origin: center center; 

}

.face {
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
}

.rotor, .face {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;    
}

.front {
  background-color: rgba(255,0,0,0.5);
  -webkit-animation: spin 4s infinite linear;
}

.bottom {
  background-color: rgba(0,0,255,0.5);
 -webkit-transform-origin: top left;
 -webkit-transform: rotateX(-90deg);
}

.back {
  background-color: rgba(0,255,255,0.5);
  -webkit-transform-origin: bottom left;
  -webkit-transform: rotateX(-90deg);
 
}

.top {
  background-color: rgba(0,255,0,0.5);
 -webkit-transform-origin: top left;
  -webkit-transform: rotateX(-90deg);
}

pre {
  margin: 10px;
}


@-webkit-keyframes spin {
  from { -webkit-transform: rotateX(0) translateZ(25px); }
  50%  { -webkit-transform: rotateX(0) translateZ(25px); }
  to   { -webkit-transform: rotateX(360deg) translateZ(25px); }
}