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>
<script src="https://aninoob.com/noobshapes/js/noob.shapes.js"></script>
<link rel="stylesheet" href="https://aninoob.com/noobshapes/css/noob.shapes.css">
<div class="stage">
</div>

CSS

html{
 height:100%;
}
body{
  perspective:500px;
  height:100%;
  background-color:#ccc;
}
.stage{
  transform: rotateX(-30deg) rotateY(-120deg);
}

.shadow-x{
  width:100px;
  height:100px;
  background-color:rgba(0,0,0,0.6);
  position:absolute;
  transform-origin: 50% 100%;
  margin-left:-50px;
  margin-top:-50px;
  transform:rotateX(90deg) rotateZ(90deg) translateY(-50px) skewX(12.5deg) scaleY(.5);
  backface-visibility:hidden;
}
.shadow-z{
  width:100px;
  height:100px;
  background-color:rgba(0,0,0,0.6);
  position:absolute;
  transform-origin: 50% 100%;
  margin-left:-50px;
  margin-top:-50px;
  transform:rotateX(90deg) translateY(-50px) skewX(-77.5deg) scaleY(.11);
  backface-visibility:hidden;
}

JavaScript

noobshapes.set_target($('.stage'));

noobshape_0 = noobshapes.create('cube',{"shape":"cube","opacity":1,"backface":false,"animation_name":"none","animation_delay":0,"animation_duration":1000,"animation_iteration_count":"1","animation_direction":"normal","animation_fill_mode":"forward","animation_timing_function":"ease-in-out","brightness":1,"x":0,"y":0,"z":0,"ox":0,"oy":0,"oz":0,"bg_x":0,"bg_y":0,"bg_scale_x":100,"bg_scale_y":100,"rx":0,"ry":0,"rz":0,"sx":1,"sy":1,"sz":1,"skew_x":0,"skew_y":0,"width":100,"height":100,"depth":100,"color":"#333333","texture":"none","perspective":"none","outlinecolor":"#ffffff","outlinewidth":1,"outlinestroke":"none","blend_mode":"normal","hide_top":false,"hide_bottom":false,"hide_front":false,"hide_back":false,"hide_left":false,"hide_right":false,"locked":false,"clippath":"none"});

var element = $('.stage div[id="' + noobshape_0.attr('id') + '"]');

var shadow_x = $('<div class="shadow-x"></div>');
var shadow_z = $('<div class="shadow-z"></div>');

element.append(shadow_x);
element.append(shadow_z);

castShadows = function(element,p1){

	var p2 = { x: element[0].properties.x, y: element[0].properties.y, z: element[0].properties.z };

	// get angle between 2 points
  
  var angle = Math.atan2(p2.z - p1.z, p2.x - p1.x) * 180 / Math.PI;
  var angle2 = Math.atan2(p2.x - p1.x, p2.y - p1.y) * 180 / Math.PI;
  var angle3 = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
  
  var scale = (90-Math.abs(angle))/100;
	var scale2 = (90-angle2)/100;
	var scale3 = (90-angle3)/100;
  
  
  
  if(angle < 45){
  	
    var s1 = (scale-(scale*(Math.sin(angle-180))));
  	var s2 = (scale-(scale*(Math.sin(180+angle))));
  	 alert(s1);
  	
  } else {
  
  	var s1 = (scale-(scale*(Math.sin(180+angle))));
  	var s2 = (scale-(scale*(Math.sin(angle-180))));
  	
  }
	
  shadow_x.css('transform','rotateX(90deg) rotateZ(90deg) translateY(-50px) skewX(' + (90-angle) + 'deg) scaleY(' + s1 + ')');
  shadow_z.css('transform','rotateX(90deg) translateY(-50px)...