JSFiddle - React, Tailwind, and code Playground

by Dennis Betman

HTML

<div class="test">
    <div class="centerBody">
        <div class="bodyFront"></div>
        <div class="bodyLeft"></div>
        <div class="bodyRight"></div>
        <div class="bodyBack"></div>
    </div>
</div>

CSS

@-webkit-keyframes spinner {
      from {
          -webkit-transform: rotateY(0deg) translateZ(50px);
      }
      to {
          -webkit-transform: rotateY(-360deg) translateZ(50px);
      }
  }
  /* all other browsers */
  @keyframes spinner {
      from {
          -moz-transform: rotateY(0deg) translateZ(50px);
          ;
          -ms-transform: rotateY(0deg) translateZ(50px);
          ;
          transform: rotateY(0deg) translateZ(50px);
          ;
      }
      to {
          -moz-transform: rotateY(-360deg) translateZ(50px);
          ;
          -ms-transform: rotateY(-360deg) translateZ(50px);
          ;
          transform: rotateY(-360deg) translateZ(50px);
          ;
      }
  }
  body {
      background:#d3d3d3;
  }
  .test {
      perspective: 10px;
      width: 200px;
      height: 340px;
      margin-left: auto;
      margin-right: auto;
  }
  .centerBody {
      position: relative;
      margin:0px auto;
      width:100px;
      -webkit-transform-style: preserve-3d;
      -webkit-animation-name: spinner;
      -webkit-animation-timing-function: linear;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-duration: 3s;
      margin-top:50px;
  }
  .bodyFront {
      position:absolute;
      width: 100px;
      height:200px;
      background: #1e5799;
      /* Old browsers */
      background: -moz-linear-gradient(left, #1e5799 0%, #7db9e8 100%);
      /* FF3.6+ */
      background: -webkit-gradient(linear, left top, right top, color-stop(0%, #1e5799), color-stop(100%, #7db9e8));
      /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(left, #1e5799 0%, #7db9e8 100%);
      /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(left, #1e5799 0%, #7db9e8 100%);
      /* Opera 11.10+ */
      background: -ms-linear-gradient(left, #1e5799 0%, #7db9e8 100%);
      /* IE10+ */
      background: linear-gradient(to right, #1e5799 0%, #7db9e8 100%);
      /* W3C */
      filter:...