JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<div class="hintergrund">
   <input id="toggle" type="checkbox">
   <div class="dreid">
      <div class="deckflaeche"></div>
      <div class="left"></div>
      <div class="front"></div>
      <div class="right"></div>
      <div class="feld3d">
         <div class="front"></div>
         <div class="right"></div>
         <div class="left"></div>
      </div>
      <div class="feld3d">
         <div class="front"></div>
         <div class="right"></div>
         <div class="left"></div>
      </div>
      <div class="feld3d">
         <div class="front"></div>
         <div class="right"></div>
         <div class="left"></div>
      </div>
      <div class="feld3d">
         <div class="front"></div>
         <div class="right"></div>
         <div class="left"></div>
      </div>
      <div class="feld3d">
         <div class="front"></div>
         <div class="right"></div>
         <div class="left"></div>
      </div>
      <div class="feld3d">
         <div class="front"></div>
         <div class="right"></div>
         <div class="left"></div>
      </div>
      <div class="feld3d">
         <div class="front"></div>
         <div class="right"></div>
         <div class="left"></div>
      </div>
      <div class="feld3d">
         <div class="front"></div>
         <div class="right"></div>
         <div class="left"></div>
      </div>
      <div class="feld3d">
         <div class="front"></div>
         <div class="right"></div>
         <div class="left"></div>
      </div>
      <div class="feld3d">
         <div class="front"></div>
         <div class="right"></div>
         <div class="left"></div>
      </div>
      <div class="feld3d">
         <div class="front"></div>
         <div class="right"></div>
         <div class="left"></div>
      </div>
      <div class="feld3d">
         <div class="front"></div>
         <div class="right"></div>
         <div class="left"></div>
      </div>
      <div class="feld3d">
         <div...

CSS

body {
  margin: 0; padding: 0;
  background-color: #ccf;
  width: 100%;
}
.hintergrund {
  display: flex;
  perspective: 1000px;
}
#toggle:checked+.dreid {
  transform: rotateX(50deg) rotateZ(-50deg) scale3d(1, 1, 1);
  transition: transform 1s;
}
.dreid {
  margin: auto auto;  padding: 10px 10px; width: 372px; height: 372px;
  position:relative; transform: rotateX(50deg) rotateZ(50deg) scale3d(1, 1, 1);
  transition: transform 1s;
  perspective: 1000px;
  transform-style: preserve-3d; background-color: black;
}
.dreid * {
  box-sizing: border-box;
}
.dreid > .front {
  position:absolute; bottom: 0; left: 0; width: 100%; height: 50px;
  transform: translate3d(0px, 25px, -25px) rotateX(90deg);
  background-color:#853;
}
.dreid > .left {
  position:absolute; left: 0; top: 0; height: 100%; width: 50px;
  transform: translate3d(-25px, 0px, -25px) rotateY(90deg);
  background-color:#a63;
}
.dreid > .right {
  position:absolute; right: 0; top: 0; height: 100%; width: 50px;
  transform: translate3d(25px, 0px, -25px) rotateY(90deg);
  background-color:#d71;
}
.dreid > .deckflaeche {
  position: absolute; width: 100%; height: 100%; top: 0px; left: 0px;
  background: linear-gradient(to top, #bbb , #888);
}
.feld3d {
  display: inline-block; padding: 0; margin: 5px; position:relative;
  width: 80px; height: 80px;
  background-color: #c00;
  border: 1px solid black; border-radius: 3px;
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 10px);
  transition: 0.3s;
}
.feld3d .front {
  position: absolute; background-color: #ddd; width: 76px; height: 20px;
  transform: translate3d(1px, 67px, -10px) rotateX(90deg) ;
}
.feld3d .right {
  position: absolute; background-color: #bbb; width: 76px; height: 20px;
  transform: translate3d(38px, 29px, -10px) rotateX(90deg) rotateY(90deg) ;
}
.feld3d .left {
  position: absolute; background-color: #bbb; width: 76px; height: 20px;
  transform: translate3d(-37px, 29px, -10px) rotateX(90deg) rotateY(90deg);
}
.feld3d:hover {
 ...