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="viewport">
  <div class="marker">
  </div>
  <div class="stage">
  <div class="object">
  
  </div>
  </div>
</div>

CSS

html{
  height:100%;
}
body{
  height:100%;
  margin:0px;
  background-color:#333;
}
.viewport{
  position:relative;
  width:100%;
  height:100%;
  perspective:500px;
}
.marker{
  position:absolute;
  top:50%;
  left:50%;
  width:60px;
  height:60px;
  background-color:#ccc;
  border-radius:50%;
  margin-left:-25px;
  margin-top:-25px;
}
.stage{
  position:absolute;
  top:50%;
  left:50%;
  width:0px;
  height:0px;
  transform-style:preserve-3d;
}
.object{
  position:absolute;
  top:50%;
  left:50%;
  width:60px;
  height:60px;
  background-color:#ff0000;
  border-radius:50%;
  margin-left:-25px;
  margin-top:-25px;
}

JavaScript

var marker = $('.marker');
var object = $('.object');

var perspective = 500;

function distanceVector( v1, v2 )
{
    var dx = v1.x - v2.x;
    var dy = v1.y - v2.y;
    var dz = v1.z - v2.z;

    return parseInt(Math.sqrt( dx * dx + dy * dy + dz * dz ));
}

function angleBetweenPoints(p1,p2){

		return Math.atan2(p2.z - p1.z, p2.x - p1.x) * 180 / Math.PI;
		
	};
	
function angleBetweenPoints2(p1,p2){

		return Math.atan2(p2.y - p1.y, p2.z - p1.z) * 180 / Math.PI;
		
	};
  
function toRadians (angle) {
  return angle * (Math.PI / 180);
}

var point2 = { x: 0, y: 0, z: 0 };
var point1 = { x: -200, y: -200, z: -1000 };

var base_ry = 0;
var base_rx = 0;

var distance = distanceVector( point1, point2 );

var x = toRadians(angleBetweenPoints(point1,point2)-90+base_ry) * perspective;
var y = toRadians((angleBetweenPoints2(point1,point2)+base_rx)*-1) * perspective;

object.css('transform','translateX(' + point1.x + 'px) translateY(' + point1.y + 'px) translateZ(' + point1.z + 'px)');

marker.css('transform','translateX(' + x + 'px) translateY(' + y + 'px)');