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%;
  background-color:#000;
  perspective:500px;
  perspective-origin:50% 30%;
}
.stage{
  top:50%;
  left:50%;
  width:0px;
  height:0px;
  position:absolute;
  transform-style:preserve-3d;
  //animation: rotate 5s infinite linear;
}
@keyframes rotate{
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
.noob-shape{
  top:50%;
  left:50%;
  height:0px;
  width:0px;
  transform-style:preserve-3d;
  position:absolute;
  transform:rotateY(45deg);
}
.noob-shape>div{
  position:absolute;
  backface-visibility:hidden;
  -webkit-box-shadow:inset 0 0 3px 2px rgba(0,0,0,0.2);
box-shadow:inset 0 0 3px 2px rgba(0,0,0,0.2);
}

JavaScript

var noobshapes = {
	
  stage: $('.stage'),
  
	shapes: Array('rectangular'),
  
  create: function(shape,properties){
  	
    // check requirements //
    
   
    
    if(!properties.x){ properties.x = 0; }
    if(!properties.y){ properties.y = 0; }
    if(!properties.z){ properties.z = 0; }
    
    if(!properties.rx){ properties.rx = 0; }
    if(!properties.ry){ properties.ry = 0; }
    if(!properties.rz){ properties.rz = 0; }
    
    if(!properties.sx){ properties.sx = 1; }
    if(!properties.sy){ properties.sy = 1; }
    if(!properties.sz){ properties.sz = 1; }
    
    if(!properties.width){ properties.width = 100; }
    if(!properties.height){ properties.height = 100; }
    if(!properties.depth){ properties.depth = 100; }
    
    if(!properties.color){ properties.color = '#333'; }
    if(!properties.texture){ properties.texture = 'none'; } else { properties.texture = 'url(' + properties.texture + ')'; }
    
    if(!properties.outlinecolor){ properties.outlinecolor = '#fff'; }
    if(!properties.outlinewidth){ properties.outlinewidth = 1; }
    if(!properties.outlinestroke){ properties.outlinestroke = 'dashed'; }
    
    if(properties.outline){ 
    
    	var ol = properties.outlinestroke + ' ' + properties.outlinewidth + 'px ' + properties.outlinecolor;
    
    } else {
    
    	var ol = '';
      
    }
    
    var generated = $('<div class="noob-shape"></div>');
    
    generated.css('transform','translateX(' + properties.x + 'px) translateY(' + properties.y + 'px) translateZ(' + properties.z + 'px) rotateX(' + properties.rx + 'deg) rotateY(' + properties.ry + 'deg) rotateZ(' + properties.rz + 'deg) scaleX(' + properties.sx + ') scaleY(' + properties.sy + ') scaleZ(' + properties.sz + ')');
  	switch(shape){
    
    	case "rectangular":
      
      // draw top
      generated.append('<div style="background-image:' + properties.texture + ';background-color:' + properties.color + ';width:' + properties.width + 'px;height:' + properties.depth +...