JSFiddle - React, Tailwind, and code Playground

by sagens

HTML

<section class="container">
  <div id="cube">
    <figure class="front">keyboard</figure>
    <figure class="right">+-</figure>
  </div>
</section>

CSS

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

#cube {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
}

#cube figure {
  width: 196px;
  height: 196px;
  display: block;
  position: absolute;
  border: 2px solid black;
}

#cube .front  { transform: rotateY(-20deg) translateZ(100px); }
#cube .right  { transform: rotateY(70deg) translateZ(100px); }