<div class="flipping-1" style="animation: f0 2s infinite"></div>
<div class="flipping-1"></div>
.flipping-1 {
  width: 80px;
  aspect-ratio: 1;
  background: #000;
  animation: f1 2s infinite;
}

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

@keyframes f1 {
  0%   {transform: perspective(150px) rotateX(  0deg)}
  100% {transform: perspective(150px) rotateX(180deg)}
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  grid-auto-flow: column;
  gap: 80px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.