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="noob-pilot-visor">
  <div class="noob-pilot-visor-base-top"></div>
  <div class="noob-pilot-visor-top"></div>
  <div class="noob-pilot-visor-base-front"></div>
</div>
<button style="z-index:999999999;position:absolute;">TOGGLE VISOR</button>

CSS

html{
  height:100%;
}
body{
  background-color:#000;
  perspective:500px;
  height:100%;
  margin:0px;
}
.noob-pilot-visor{
  position:absolute;
  transform-style:preserve-3d;
  top:50%;
  left:50%;
  height:800px;
  width:600px;
  margin-left:-300px;
  margin-top:-400px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff9932+0,ff7f04+100&0.11+0,0.29+100 */
background: -moz-linear-gradient(top, rgba(255,153,50,0.11) 0%, rgba(255,127,4,0.29) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,153,50,0.11) 0%,rgba(255,127,4,0.29) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,153,50,0.11) 0%,rgba(255,127,4,0.29) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1cff9932', endColorstr='#4aff7f04',GradientType=0 ); /* IE6-9 */
  transform:translateZ(50px) rotateX(-10deg);
  transform-origin:50% 0%;
  backface-visibility:hidden;
  transition:all .5s ease-in-out;
}
.noob-pilot-visor.open{
  transform:translateZ(300px) translateY(-300px) rotateX(-90deg);
}
.noob-pilot-visor:before{
  position:absolute;
  content:"";
  display:block;
  top:0%;
  left:0%;
  height:800px;
  width:400px;
  margin-left:-399px;
  margin-top:0px;
  transform-origin: 100% 50%;
  transform:rotateY(55deg);
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff9932+0,ff7f04+100&0.11+0,0.29+100 */
background: -moz-linear-gradient(top, rgba(255,153,50,0.11) 0%, rgba(255,127,4,0.29) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,153,50,0.11) 0%,rgba(255,127,4,0.29) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,153,50,0.11) 0%,rgba(255,127,4,0.29) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1cff9932',...

JavaScript

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

	$('.noob-pilot-visor').toggleClass('open');

});