<!-- Revolving 3D Planet in CSS3 -->
<!-- Created by Vince M. -->

<div id="outer">
<div id="earth"></div>
<div id="earth2"></div>
<div id="earth3"></div>
</div>

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: #084;
  background-color: lightblue;
  background-color: #923cb5;
  background-image: linear-gradient(to bottom, #923cb5 0%, #000000 74%);
  background-color: #ffa69e;
  background-image: linear-gradient(315deg, #ffa69e 0%, #5d4954 74%);
  perspective: 1500px;
}

#outer {
  width: 80%;
  height: 60%;
  margin-left: 10%;
  transform: rotate(12deg);
  transform-style: preserve-3d;
  transition: all 4.2s linear;
}

#earth {
 background-image: url('https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcTQqoB4xBnIkmUg5pxDyYW2h0Q1pRTsbQBOfhg-E-y4iLFicsyi');
  background-color: blue;
  width: 80px;
  height: 80px;
  /* a black shadow from left and white from right */
  box-shadow: inset 16px 0 40px 3px rgba(0,0,0,0.9),
    inset -3px 0 5px 2px rgba(255,255,255,0.16);
  background-size: 240px;
  margin: 80px auto;
  margin: 40px auto;
  border-radius: 50%;
  position: relative;
  transform-style: preserve-3d;
  animation-name: move,scale,rotate;
  animation-duration: 4s,4s,4s;
  animation-iteration-count: infinite,infinite,infinite;
  animation-timing-function: ease-in-out,linear,linear;
}

#earth2, #earth3 {
 background-image: url('https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcTQqoB4xBnIkmUg5pxDyYW2h0Q1pRTsbQBOfhg-E-y4iLFicsyi');
  background: silver;
  background-color: #000000;
  background-image: linear-gradient(180deg, #000000 0%, #7f8c8d 74%);
  width: 150px;
  height: 140px;
  box-shadow: inset 16px 0 40px 3px rgba(0,0,0,0.6),
    inset -3px 0 5px 2px rgba(255,255,255,0.16);
  background-size: 180px;
  margin: 80px auto;
  margin: 60px auto;
  border-radius: 50%;
  position: relative;
  transform-style: preserve-3d;
  animation-name: move,scale,rotate;
  animation-duration: 6s,6s,6s;
  animation-iteration-count: infinite,infinite,infinite;
  animation-timing-function: ease-in-out,linear,linear;
}

#earth3 {
  margin: 60px auto;
  
  background-color: teal;
  background-color: #ffeaa7;
  background-image: linear-gradient(180deg, #ffeaa7 0%, #000000 74%);
  transform: translateX(-240px);
  transform-style: preserve-3d;
  animation-name: move,scale,rotate;
  animation-duration: 8s,8s,8s;
  animation-iteration-count: infinite,infinite,infinite;
  animation-timing-function: ease-in-out,linear,linear;
}

@keyframes move {
  /* 0%   { left: 200px;  }  
  70%  { left: -200px; }
  100% { left: 200px;  } */
  0%   { left: 240px;  }  
  70%  { left: -150px; }
  100% { left: 240px;  }
}

@keyframes scale {
  0%  { transform: scale(1);   }
  32% { transform: scale(0.4); animation-timing-function:  ease-in; }
  70% { transform: scale(1); animation-timing-function:  ease-in;  }
  75% { transform: scale(1.1);  animation-timing-function:  ease-in-out; }
  /* 86% { transform: scale(2);  } */
  86% { transform: scale(1.2);  } 
  98% { transform: scale(1.1); }
  100%{ transform: scale(1); }
}
 
@keyframes rotate {
  0% { background-position: 0px; }
  100% { background-position: 190px; }
}

function changeRotation() {
  
  let outer = document.getElementById('outer');
  outer.style.transform = 'rotate(-3deg)';
  
  setTimeout(rotateBack, 15000);
  
}

setTimeout(changeRotation, 15000);

function rotateBack() {
  
  let outer = document.getElementById('outer');
  outer.style.transform = 'rotate(3deg)';
  
}