JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="stage">
  <div class="player">
  </div>
</div>
<div class="controls">
Stage Padding: <input type="number" step="10" min="0" max="200" value="0" onchange="world.set_padding($(this).val());" /><br /><br />
Perspective: <input type="number" step="50" min="50" max="1000" value="500" onchange="world.set_perspective($(this).val());" /><br /><br />
</div>

CSS

body{
  background-color:#666;
}
.stage{
  background-color:#000;
  position:fixed;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
  perspective:500px;
  transition:all .6s;
}
.player{
  position:absolute;
  left:50%;
  top:50%;
  width:100px;
  height:100px;
  margin-top:-50px;
  margin-left:-50px;
  transform:rotateY(-45deg) translateZ(50px);
  background-image:url(https://cdn2.iconfinder.com/data/icons/starwars/icons/128/DarthVader.png);
  background-size:cover;
}
.controls{
  position:absolute;
  z-index:100;
  color:#fff;
  font-family:helvetica;
}

JavaScript

$(document).ready(function(){

	world = {};

  world.padding = 0;
  world.perspective = 500;

  world.player = $('.player');
  world.stage = $('.stage');

  world.set_perspective = function(new_perspective){

    world.perspective = new_perspective;
    world.stage.css('perspective',new_perspective + 'px');

  }
  
  world.set_padding = function(new_padding){

    world.padding = new_padding;
    world.stage.css('top',new_padding + 'px').css('left',new_padding + 'px').css('right',new_padding + 'px').css('bottom',new_padding + 'px');

  }
  
});