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 id="stage">
  <div id="object3d" style="background-color:#ff0000; width:100px; height:100px; transform:translateX(10px) rotateY(10deg);">
  </div>
</div>

CSS

html{
  height:100%;
}
body{
  perspective:500px;
  height:100%;
}
#stage{
  transform-style:preserve-3d;
  position:absolute;
  left:50%;
  top:50%;
  height:0px;
  width:0px;
  transform:rotateX(-20deg);
}
#object3d{
  background-color:#ff0000; 
  width:100px; 
  height:100px;
}
@keyframes spin {
  0% { transform: rotateX(0deg) rotateY(0deg); }
  100% { transform: rotateX(360deg) rotateY(360deg); }
}

JavaScript

// multiplying a vector



var point = [-30,-30,0,1];


function multiplyMatrixAndPoint(matrix, point) {
  
  //Give a simple variable name to each part of the matrix, a column and row number
  var c0r0 = matrix[ 0], c1r0 = matrix[ 1], c2r0 = matrix[ 2], c3r0 = matrix[ 3];
  var c0r1 = matrix[ 4], c1r1 = matrix[ 5], c2r1 = matrix[ 6], c3r1 = matrix[ 7];
  var c0r2 = matrix[ 8], c1r2 = matrix[ 9], c2r2 = matrix[10], c3r2 = matrix[11];
  var c0r3 = matrix[12], c1r3 = matrix[13], c2r3 = matrix[14], c3r3 = matrix[15];
  
  //Now set some simple names for the point
  var x = point[0];
  var y = point[1];
  var z = point[2];
  var w = point[3];
  
  //Multiply the point against each part of the 1st column, then add together
  var resultX = (x * c0r0) + (y * c0r1) + (z * c0r2) + (w * c0r3);
  
  //Multiply the point against each part of the 2nd column, then add together
  var resultY = (x * c1r0) + (y * c1r1) + (z * c1r2) + (w * c1r3);
  
  //Multiply the point against each part of the 3rd column, then add together
  var resultZ = (x * c2r0) + (y * c2r1) + (z * c2r2) + (w * c2r3);
  
  //Multiply the point against each part of the 4th column, then add together
  var resultW = (x * c3r0) + (y * c3r1) + (z * c3r2) + (w * c3r3);
  
  return [resultX, resultY, resultZ, resultW];
}

function multiply(a, b) {
  
  var output = Array();
  
  output[0] = a[0] * b[0];
  output[1] = a[1] * b[1];
  output[2] = a[2] * b[2];
  output[3] = a[3] * b[3];
  
  return output;
}

var ry = 0;

function getMatrixArray(element){

	var matrix = element.css('transform');
  matrix = matrix.substr(9);
  matrix = matrix.substr(0,matrix.length-1);
  var matrix_array = matrix.split(',');
  var m = Array();

  for(var i=0;i<matrix_array.length;i++){

    m.push(parseFloat(matrix_array[i]));

  }
  
  return m;

}

var vector_forward = [0,0,1,1];
var vector_up = [0,-1,0,1];

var objectElement = $('#object3d');
var stageElement = $('#stage');

function render(){
	
  var m =...