JSFiddle - React, Tailwind, and code Playground

by evgkch

HTML

<div style="width:660px;text-align:center;margin:20px auto 0">
  
  <div class="container style-3d">
    <p>transform-style: preserve-3d;</p>
    <div class="top">
      <div class="bottom"></div>
    </div>
  </div>

CSS

body {margin:0;}
div {
  height: 130px;
  width: 130px;  
}
h3 {
  margin: 0 0 30px;
}
.container {
  height: 160px;
  margin: 0 auto 1em;
  -webkit-perspective: 500px;
  perspective: 500px;
  }
.top, .bottom {
  position: absolute;
  bottom: 0;
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
  border-radius: 2px;
  -webkit-animation: rotate 5s infinite;
  animation: rotate 5s infinite;
}
.top {
  background: rgba(255, 239, 0, .9);
}
.bottom {
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
  background: rgba(255, 37, 134, .9);
}
.style-flat .top, .style-flat .bottom {
  -webkit-transform-style: flat;
  transform-style: flat;
}
.style-3d .top, .style-3d .bottom {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
@-webkit-keyframes rotate {
  50% {
    transform: none;
    }
}
@keyframes rotate {
  50% {
    transform: none;
    }
}