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>
<link rel="stylesheet" href="https://aninoob.com/ANINOOB.api/css/aninoob.css">
<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

.stage{
  transform:translateZ(0px);
}
.cubelight{
  transform-style:preserve-3d;
}
.cubelight:before{
  content:"";
  display:block;
  background-image:inherit;
  background-size:cover;
  width:100%;
  height:100%;
  position:absolute;
  transform:rotateY(60deg);
}
.cubelight:after{
  content:"";
  display:block;
  background-image:inherit;
  background-size:cover;
  width:100%;
  height:100%;
  position:absolute;
  transform:rotateY(-60deg);
}

JavaScript

noobshapes.init($('.stage'),$('body'));

noobshape_0 = noobshapes.create('cube',{"shape":"cube","opacity":".5","backface":true,"brightness":"1","x":0,"y":-100,"z":0,"ox":0,"oy":0,"oz":0,"bg_x":0,"bg_y":0,"bg_scale_x":100,"bg_scale_y":100,"rx":-20,"ry":20,"rz":0,"sx":1,"sy":1,"sz":1,"skew_x":0,"skew_y":0,"width":100,"height":100,"depth":100,"color":"#3d4b6c","texture":"https://aninoob.com/ANINOOB.api/image.library/lights/light.cube.1.png","perspective":"none","outlinecolor":"#ffffff","outlinewidth":1,"outlinestroke":"none","blend_mode":"overlay","hide_top":false,"hide_bottom":false,"hide_front":false,"hide_back":false,"hide_left":false,"hide_right":false,"locked":false,"clippath":"none"});


var cubelight = {

	width: 100,
	height: 100,
	depth: 100,

	cube: noobshape_0,
  cube_front: $('.noob-shape-inner-front'),
  cube_back: $('.noob-shape-inner-back'),
  cube_top: $('.noob-shape-inner-top'),
  cube_bottom: $('.noob-shape-inner-bottom'),
  cube_left: $('.noob-shape-inner-left'),
  cube_right: $('.noob-shape-inner-right'),
  
  element: null,
  
  radius: 30,
  
  image: 'https://aninoob.com/ANINOOB.api/image.library/lights/yellow.1.png',
  reflection_image: 'https://aninoob.com/ANINOOB.api/image.library/lights/yellow.1.png',
  
  position: { x:0, y:0, z:0 },
  
  directionx: 1,
  directiony: 1,
  directionz: 1,
  
  onStart: function(){
  
    this.cube_front = this.cube.find('.noob-shape-inner-front');
    this.cube_back = this.cube.find('.noob-shape-inner-back');
    this.cube_top = this.cube.find('.noob-shape-inner-top');
    this.cube_bottom = this.cube.find('.noob-shape-inner-bottom');
    this.cube_left = this.cube.find('.noob-shape-inner-left');
    this.cube_right = this.cube.find('.noob-shape-inner-right');
  
  	this.element = $('<div class="cubelight"></div>');
  	this.element.css('width',(this.radius*2) + 'px');
    this.element.css('height',(this.radius*2) + 'px');
    this.element.css('margin-left',(this.radius*-1) + 'px');
   ...