JSFiddle - React, Tailwind, and code Playground

by vals

HTML

<body>

 
  <!--    <input type="submit" value="Mars"/> -->

  <div id="Contain">
    
    <div id="Path">              
        <div id="moonContain">
            
            <img id="moon" src="http://starchild.gsfc.nasa.gov/Images/StarChild/solar_system_level1/moon.gif" alt="Moon"/>
            
        </div>
        
    </div>
  </div>
  
    
</body>

CSS

<style type="text/css">
    
    body  {margin:0;background-color:grey;}
    #Contain { margin:auto;width:700px; height:700px;}    
    
    #Path{margin:5% 15% auto; position:relative;
           height:500px;width:500px;
           background-color:rgba(0,200,200, .1);
           border:1px solid black;
           border-radius:300px;
           -webkit-transform:perspective(0px) rotateX(50deg) rotateY(25deg);
           -webkit-transform-style: preserve-3d;}
    
    #moonContain {width:500px;height:500px;position:absolute; margin-left:-0.5%;
    -webkit-transform-style: preserve-3d;
    -webkit-animation:Rotate 15s linear infinite;
                }
    
    #moon { width:150px;-webkit-transform-style: preserve-3d;
        -webkit-animation:counterRotate 15s linear infinite;}
    
    
    @-webkit-keyframes Rotate        
    {from {-webkit-transform:rotate(0deg);}
     to   {-webkit-transform:rotate(360deg);}}    
    @-webkit-keyframes counterRotate        
    {from {-webkit-transform:rotate(360deg) rotateX(-50deg) rotateY(-25deg);}
     to   {-webkit-transform:rotate(0deg) rotateX(-50deg) rotateY(-25deg);}}    
    

    
   </style>