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="stage">

</div>

CSS

html{
  height:100%;
}
body{
  height:100%;
  margin:0px;
  background-color:#666;
  perspective:500px;
}
.stage{
  top:50%;
  left:50%;
  height:0px;
  width:0px;
  position:absolute;
  transform:translateZ(500px);
  transform-style:preserve-3d;
}
.pixelpaint{
  position:absolute;
  background-color: #ff9900;
  width:10px;
  height:10px;
  margin-left:-5px;
  margin-top:-5px;
  top:50%;
  left:50%;
  transition:all 1s;
}

JavaScript

var pixelpainter = {

	position: { x: 0, y: 0, z: 0 },
	
  pixel_range: 400,
	pixel_origin: { x: 0, y: 0, z: 0, rx: 0, ry: 0, rz: 0, sx: 1, sy: 1, sz: 1 },
	pixelcount: 200,
	pixels: Array(),

	map: Array(
  	{ x: 0, y: -50, z: 0, rx: 90, ry: 0, rz: 0, sx: 1, sy: 1, sz: 1, color: '#ff0000', width: 100, height: 100 },
    { x: 50, y: 0, z: 0, rx: -90, ry: -90, rz: 0, sx: 1, sy: 1, sz: 1, color: '#ff0000', width: 100, height: 100 },
    { x: 0, y: 50, z: 0, rx: 90, ry: 0, rz: 0, sx: 1, sy: 1, sz: 1, color: '#ff0000', width: 100, height: 100 },
    { x:-50, y: 0, z: 0, rx: 0, ry: 90, rz: 0, sx: 1, sy: 1, sz: 1, color: '#ff0000', width: 100, height: 100 },
    { x: 0, y: -50, z: -100, rx: 90, ry: 0, rz: 0, sx: 1, sy: 1, sz: 1, color: '#ff0000', width: 100, height: 100 },
    { x: 50, y: 0, z: -100, rx: -90, ry: -90, rz: 0, sx: 1, sy: 1, sz: 1, color: '#ff0000', width: 100, height: 100 },
    { x: 0, y: 50, z: -100, rx: 90, ry: 0, rz: 0, sx: 1, sy: 1, sz: 1, color: '#ff0000', width: 100, height: 100 },
    { x:-50, y: 0, z: -100, rx: 0, ry: 90, rz: 0, sx: 1, sy: 1, sz: 1, color: '#ff0000', width: 100, height: 100 },
    { x: 0, y: -50, z: -200, rx: 90, ry: 0, rz: 0, sx: 1, sy: 1, sz: 1, color: '#ff0000', width: 100, height: 100 },
    { x: 50, y: 0, z: -200, rx: -90, ry: -90, rz: 0, sx: 1, sy: 1, sz: 1, color: '#ff0000', width: 100, height: 100 },
    { x: 0, y: 50, z: -200, rx: 90, ry: 0, rz: 0, sx: 1, sy: 1, sz: 1, color: '#ff0000', width: 100, height: 100 },
    { x:-50, y: 0, z: -200, rx: 0, ry: 90, rz: 0, sx: 1, sy: 1, sz: 1, color: '#ff0000', width: 100, height: 100 },
    { x: 0, y: -50, z: -300, rx: 90, ry: 0, rz: 0, sx: 1, sy: 1, sz: 1, color: '#ff0000', width: 100, height: 100 },
    { x: 50, y: 0, z: -300, rx: -90, ry: -90, rz: 0, sx: 1, sy: 1, sz: 1, color: '#ff0000', width: 100, height: 100 },
    { x: 0, y: 50, z: -300, rx: 90, ry: 0, rz: 0, sx: 1, sy: 1, sz: 1, color: '#ff0000', width: 100, height: 100 },
    { x:-50, y: 0, z: -300, rx: 0, ry: 90, rz:...