JSFiddle - React, Tailwind, and code Playground

by Tan

CSS

.container { float:left;
  width: 10px;
  height: 10px;
  position: relative;
  -webkit-perspective: 800;
}
.flip {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 1s;
}
.flip div {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
}
.front {
  background: red;
}
.back {
  background: blue;
  -webkit-transform: rotateY(180deg);
}
.flipped {
  -webkit-transform: rotateY(180deg);
}

JavaScript

// Fun Blocks

function tog(div){ if(div.className == "flip"){div.className = "flip flipped";} else {div.className = "flip";}}

for (i=1;i<=1000;i+=1) {
document.write ('<div class="container"><div onmouseout="tog(this)" class="flip"><div class="front"></div><div class="back"></div></div></div>');
}