JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<div class="scene">
  <div class="central-cube-container">
    <div class="cube my-cube">
    <div class="cube-face cube-face-front">front</div>
      <div class="cube-face cube-face-back">back</div>
      <div class="cube-face cube-face-right">right</div>
      <div class="cube-face cube-face-left">left</div>
      <div class="cube-face cube-face-top">top</div>
      <div class="cube-face cube-face-bottom">bottom</div>
    </div>
  </div>
</div>

SCSS

@mixin valign() {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin cube_properties($size) {
  $half: $size / 2;
  width: $size;
  height: $size;
  transform: translateZ(-$half);
  .cube-face {
    width: $size;
    height: $size;

    &-front  { transform: rotateY(  0deg) translateZ($half); }
    &-right  { transform: rotateY( 90deg) translateZ($half); }
    &-back   { transform: rotateY(180deg) translateZ($half); }
    &-left   { transform: rotateY(-90deg) translateZ($half); }
    &-top    { transform: rotateX( 90deg) translateZ($half); }
    &-bottom { transform: rotateX(-90deg) translateZ($half); }
  }
}

body {
  font-family: 'Lato';  
}

.scene {
  width: 400px;
  height: 400px;
  border: 1px solid #CCC;
  margin: 80px;
  perspective: 1200px;
  position: relative;
  background-color: #111;
}

.cube {
  position: relative;
  transform-style: preserve-3d;
  &-face {
    @include valign;
    position: absolute;
    font-weight: bold;
    text-align: center;
  }
}

.my-cube {
  @include cube_properties(75px);
  transform: rotateX(45deg) rotateY(45deg);
  .cube-face {
    backface-visibility: hidden;
    background-color: black;
    color: black;
    border: 2px solid #fff;
    box-sizing: border-box;
  }
}
.central-cube-container {
  position: absolute;
  transform-style: preserve-3d;
  top: calc(50% - 37.5px);
  left: calc(50% - 37.5px);
  animation: 10s rotate infinite linear;
}

@keyframes rotate {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-360deg);
  }
}


.cube.show-front  { transform: translateZ(-100px) rotateY(   0deg); }
.cube.show-right  { transform: translateZ(-100px) rotateY( -90deg); }
.cube.show-back   { transform: translateZ(-100px) rotateY(-180deg); }
.cube.show-left   { transform: translateZ(-100px) rotateY(  90deg); }
.cube.show-top    { transform: translateZ(-100px) rotateX( -90deg); }
.cube.show-bottom { transform: translateZ(-100px) rotateX(  90deg); }