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="playership">
  <div class="rotator">
    <div class="playerfront"></div>
    <div class="playerfrontwing"></div>
    <div class="playerback"></div>
    <div class="playerbottom"></div>
    <div class="playertop"></div>
    <div class="playerleft"></div>
    <div class="playerlefttop"></div>
    <div class="playerleftbottom"></div>
    <div class="playerright"></div>
    <div class="playerrighttop"></div>
    <div class="playerrightbottom"></div>
    <div class="playergun1"></div>
    <div class="playergun2"></div>
    <div class="playerthrust1"></div>
    <div class="playerthrust2"></div>
  </div>
</div>
<button class="thrusttoggle">
THRUST TOGGLE
</button>
<button class="fire">
FIRE
</button>
<button class="killed">
KILLED
</button>

CSS

html{
  height:100%;
}
body{
  height:100%;
  perspective:500px;
  background-color:#000;
}
.playership{
	width:0px;
	height:0px;
  left:50%;
  top:50%;
	transform-style:preserve-3d;
	position:absolute;
	transform-origin:50% 50% !important;
}
.playership>.rotator{
	width:0px;
	height:0px;
  left:50%;
  top:50%;
	transform-style:preserve-3d;
	position:absolute;
  transform-origin:50% 50% !important;
  transform:rotateY(180deg);
  animation:rotate infinite linear 5s;
}
.playership.killed>.rotator{
  animation:spin infinite 3s ease-in;
}
@keyframes rotate {
  0% { transform:rotateY(0deg) rotateX(-30deg); }
  100% { transform:rotateY(360deg) rotateX(-30deg); }
}
@keyframes spin {
  0% { transform:rotateY(180deg) rotateX(0deg) rotateZ(0deg); }
  100% { transform:rotateY(180deg) rotateX(-40deg) rotateZ(1840deg); }
}
.playership>.rotator div{
  filter: hue-rotate(90deg) opacity(0.5);
}
.playership .playerfront{
  width:200px;
  height:60px;
  position:absolute;
  margin-left:-100px;
  margin-top:-40px;
  transform:translateZ(35px);
  background-image:url(http://aninoob.com/particles/assets/player/player-front.png?1);
  background-size:cover;
}
.playership .playerback{
  width:200px;
  height:40px;
  position:absolute;
  margin-left:-100px;
  margin-top:-20px;
  transform:translateZ(-35px) rotateY(180deg);
  background-image:url(http://aninoob.com/particles/assets/player/player-back.png);
  background-size:cover;
  transition:all .6s;
}
.playership.thrust .playerback{
  background-image:url(http://aninoob.com/particles/assets/player/player-back-thrust.png);
}
.playership .playergun1{
  width:90px;
  height:20px;
  position:absolute;
  margin-left:-45px;
  margin-top:25px;
  transform:translateZ(50px) rotateY(-90deg);
  background-image:url(http://aninoob.com/particles/assets/player/player-gun.png?1);
  background-size:cover;
  transition:all .2s;
}
.playership .playergun2{
  width:90px;
  height:20px;
  position:absolute;
  margin-left:-45px;
  margin-top:25px;
 ...

JavaScript

$('button.thrusttoggle').click(function(){

	$('.playership').toggleClass('thrust');

});

$('button.fire').click(function(){

	$('.playership').addClass('fire');
  
  setTimeout(function(){
  
  	$('.playership').removeClass('fire');
  
  },200);

});

$('button.killed').click(function(){

	$('.playership').addClass('killed');
  
  setTimeout(function(){
  
  	$('.playership').removeClass('killed');
  
  },3000);

});