JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class="droid">
  <div class="turret">
    <div class="turret-1"></div>
    <div class="turret-2"></div>
    <div class="turret-3"></div>
    <div class="turret-4"></div>
    <div class="turret-5"></div>
    <div class="turret-6"></div>
    <div class="turret-7"></div>
    <div class="turret-8"></div>
    <div class="turret-9"></div>
    <div class="turret-10"></div>
    <div class="eye eye-left"></div>
    <div class="eye eye-right"></div>
    <div class="eye eye-left eye-back"></div>
    <div class="eye eye-right eye-back"></div>
    <div class="eye eye-left eye-front"></div>
    <div class="eye eye-right eye-front"></div>
  </div>
</div>

CSS

html{
  height:100%;
 }
body{
  perspective:500px;
  height:100%;
  transform-style:preserve-3d;
  transform:rotateX(-25deg);
}

.droid{
  transform-style:preserve-3d;
  width:200px;
  height:400px;
  position:absolute;
  top:55%;
  left:50%;
  margin-left:-100px;
  margin-top:-200px;
  
}
@keyframes route{
  0% { transform:translateX(0px) translateZ(-1000px) ; }
  20% { transform:translateX(1000px) translateZ(-1000px) ; }
  40% { transform:translateX(2000px) translateZ(-1000px) ; }
  60% { transform:translateX(1000px) translateZ(-1000px) ; }
  80% { transform:translateX(0px) translateZ(-1000px) ; }
  100% { transform:translateX(0px) translateZ(0px); }
}
@keyframes spin{
  0% { transform:rotateY(0deg); }
  100% { transform:rotateY(360deg); }
}
.turret{
  transform-style:preserve-3d;
   position:absolute;
  width:200px;
  animation:spin 10s infinite linear;
}
.turret>div{
  position:absolute;
  background-color:rgba(0,0,0,.1);
  opacity:1;
  border-radius:50%;
  width:200px;
  height:200px;
  border:solid 1px #fff;
}
.turret>.eye{
  width:40px;
  height:40px;
  background-position:center center;
  background-image:...

JavaScript

var droid = {};

droid.init = function(){

	
  
}