JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="eye-left eye"></div>
<div class="eye-right eye"></div>

CSS

html,body{
  height:100%;
  margin:0px;
  background-color:#000;
  perspective:500px;
}
.eye{
  position:absolute;
  left:50%;
  top:50%;
  width:10px;
  height:50px;
  background-color:rgba(255,255,255,0.3);
}

JavaScript

var noobflight = {

	eye_distance: 100,
	eye_angle: 1,

	next_position: function(x,y,z,rx,ry,rz,d){
			
			var angle_rx_inradians = rx * Math.PI / 180
			var angle_ry_inradians = ry * Math.PI / 180
			
			z2 = z + Math.cos(angle_ry_inradians) * (d*-1);
			x2 = x + Math.sin(angle_ry_inradians) * (d*-1);
			y2 = y + Math.sin(angle_rx_inradians) * (d*-1);
			
			return { x: x2, y: y2, z: z2, rx: rx, ry: ry, rz: rz };
		  
		},
    
    get_eye: function(which){
    
    	switch(which){
      
      	case "left":
        var temp = noobflight.next_position(0,0,0,0,noobflight.eye_angle,0,noobflight.eye_distance * -1);
        var eye = { x: temp.z, z: temp.x };
        
        break;
        
        case "right":
        var temp = noobflight.next_position(0,0,0,0,noobflight.eye_angle,0,noobflight.eye_distance);
        var eye = { x: temp.z, z: temp.x };
        
        break;
      
      }
      
      return eye;
      
    }
    
}

setInterval(function(){

	var left = noobflight.get_eye('left');
	var right = noobflight.get_eye('right');
  
	$('.eye-left').css('transform','translateX(' + left.x + 'px) translateZ(' + left.z + 'px)');
  $('.eye-right').css('transform','translateX(' + right.x + 'px) translateZ(' + right.z + 'px)');

	noobflight.eye_angle += 1;
  
},20);