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;
  perspective:500px;
  position:relative;
  
}
.outerstage{
  position:absolute;
  top:50%;
  left:50%;
  height:0px;
  width:0px;
  transform-style:preserve-3d;
  pointer-events:none;
  transform:translateZ(0px);
}
.stage{
  position:absolute;
  top:50%;
  left:50%;
  height:0px;
  width:0px;
  transform-style:preserve-3d;
  animation:spin infinite 25s linear;
  pointer-events:none;
}
@keyframes spin{
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
.skybox{
  position:absolute;
  top:50%;
  left:50%;
  height:0px;
  width:0px;
  transform-style:preserve-3d;
  pointer-events:none;
}
.skybox>div{
  position:absolute;
  top:50%;
  left:50%;
  height:100px;
  width:100px;
  background-color:transparent;
  background-size:cover;
  backface-visibility:hidden;
}

JavaScript

var skybox = {

	width: 500,
  height:500,
  depth: 500,
  
  images: {
  	back: 'https://aninoob.com/ANINOOB.api/image.library/skyboxes/experimental/set/back.png' ,
    front: 'https://aninoob.com/ANINOOB.api/image.library/skyboxes/experimental/set/front.png' ,
    left: 'https://aninoob.com/ANINOOB.api/image.library/skyboxes/experimental/set/left.png' ,
    right: 'https://aninoob.com/ANINOOB.api/image.library/skyboxes/experimental/set/right.png' ,
    top: 'https://aninoob.com/ANINOOB.api/image.library/skyboxes/experimental/set/top.png' ,
    bottom: 'https://aninoob.com/ANINOOB.api/image.library/skyboxes/experimental/set/bottom.png' 
  },
  
  target: $('.stage'),
  
  create: function(){
  
  	var cached_this = this;
    
    var box = $('<div class="skybox"><div class="back"></div><div class="right"></div><div class="front"></div><div class="left"></div><div class="top"></div><div class="bottom"></div></div>');
  	
    box.find('.back,.front').css('width',cached_this.width+'px').css('margin-left',(parseInt(cached_this.width/2)*-1)+'px').css('height',cached_this.height+'px').css('margin-top',(parseInt(cached_this.height/2)*-1)+'px');
    
    box.find('.left,.right').css('width',cached_this.depth+'px').css('margin-left',(parseInt(cached_this.depth/2)*-1)+'px').css('height',cached_this.height+'px').css('margin-top',(parseInt(cached_this.height/2)*-1)+'px'); 
    
     box.find('.top,.bottom').css('width',cached_this.width+'px').css('margin-left',(parseInt(cached_this.width/2)*-1)+'px').css('height',cached_this.depth+'px').css('margin-top',(parseInt(cached_this.depth/2)*-1)+'px');
     
     box.find('.back').css('transform','translateZ(' + (parseInt(cached_this.depth/2)*-1) + 'px) scaleX(1.01) scaleY(1.01) scaleZ(1.01)').css('background-image','url(' + cached_this.images.back + ')');
     box.find('.front').css('transform','translateZ(' + parseInt(cached_this.depth/2) + 'px) rotateY(180deg) scaleX(1.01) scaleY(1.01)...