JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<div id="box">
  <div class="flipper">
    <svg viewBox="0 0 100 10" class="front">
      <path fill="black" d="M0 0 Q 50 20, 100 0" />
    </svg>
    <svg viewBox="0 0 100 10" class="back">
      <path fill="green" d="M0 0 Q 50 20, 100 0" />
    </svg>
  </div>
</div>

CSS

body {
  background: black;
}

#box {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  background: green;
}

.flipper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  transform-style: preserve-3d;
  transform-origin: top center;
  animation: flip 1s cubic-bezier(.75, 0, .25, 1) infinite;
}

@keyframes flip {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(180deg);
  }
}


.front,
.back {
  position: absolute;
  backface-visibility: hidden;
}

.back {
  transform: rotateY(180deg);
}