JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="stage">
<div class="face"></div>
</div>

CSS

html{
  height:100%;
}
body{
  perspective:500px;
  height:100%;
}
.stage{
  transform-style:preserve-3d;
  width:0px;
  height:0px;
  position:absolute;
  top:50%;
  left:50%;
  animation:spin2 linear infinite 10s;
}
@keyframes spin{
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
.face{
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-50px;
  margin-top:-50px;
  width:100px;
  height:100px;
  background-color:#ff0000;
  transform:matrix3d(
  1, 0, 6, 0, 
  0, 1, 2, 0, 
  0, 0, 1, 0, 
  0, 0, 0, 1
  );
}

JavaScript

var vertices = Array(
	{ x: -40, y:-40, z: 0 },
  { x: 40, y:-40, z: 0 },
  { x: 40, y:40, z: 0 },
  { x: 40, y:40, z: 0 }
);

function toMatrix(vertices){

	var m0 = 1;
  var m1 = 0;
  var m2 = 0;
  var m3 = 0;
  var m4 = 0;
  var m5 = 1;
  var m6 = 0;
  var m7 = 0;
  var m8 = 0;
  var m9 = 0;
  var m10 = 1;
  var m11 = 0;
  var m12 = 0;
  var m13 = 0;
  var m14 = 0;
  var m15 = 1;

	return 'matrix3d(' +  m0 + ', ' + m1 + ', ' + m2 + ', ' + m3 + ',' +  m4 + ', ' + m5 + ', ' + m6 + ', ' + m7 + ',' + m8 + ', ' + m9 + ', ' + m10 + ', ' + m11 + ',' + m12 + ', ' + m13 + ', ' + m14 + ', ' + m15 + ')';

}

$('.face').css('transform',toMatrix(vertices));