JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html>
  <head>
    <style>
      #parentDiv {
        perspective: 500px;
        width: 400px;
        height: 400px;
        margin: auto;
      }
      
      .childDiv {
        width: 50px;
        height: 50px;
        background-color: #ff0000;
        position: absolute;
        animation: orbit 5s infinite linear;
        transform-style: preserve-3d;
      }
      
      @keyframes orbit {
        0% { transform: rotateX(0deg) translateZ(50px); }
        100% { transform: rotateX(360deg) translateZ(50px); }
      }
    </style>
  </head>
  <body>
    <br>
    <br>
    <br>
    <div id="parentDiv">
      <div class="childDiv"></div>
    </div>
  </body>
</html>