JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div id="bg"></div>

<div id="view">
	<div id="camera">
		<div id="floor"></div>
		<div id="airplane">
			<div class="wingLeft"></div>
			<div class="wingRight"></div>
			<div class="bodyLeft"></div>
			<div class="bodyRight"></div>
			<div class="bodyShadow"></div>
			<div class="cloud"></div>
			<div class="cloudShadow"></div>
		</div>
	</div>
</div>

CSS

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

div {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

#view {
  position: absolute;
  width: 940px;
  height: 465px;
  -webkit-perspective: 500;
  -moz-perspective: 500;
  perspective: 500;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
  -webkit-transform: translate3d(0px, 0px, 0px);
  -moz-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);
  overflow: hidden;
}

#bg {
  position: absolute;
  width: 940px;
  height: 465px;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#041A4B), to(#AFDAFF));
  background: -moz-linear-gradient(top, #041A4B, #AFDAFF);
  -webkit-transform: translate3d(0px, 0px, -1000px);
  -moz-transform: translate3d(0px, 0px, -1000px);
  transform: translate3d(0px, 0px, -1000px);
}

#camera {
  position: absolute;
  left: 232px;
  top: 232px;
  -webkit-animation-name: camerawork;
  -webkit-animation-timing-function: linear;
  -webkit-animation-duration: 14s;
  -webkit-animation-direction: normal;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: camerawork;
  -moz-animation-timing-function: linear;
  -moz-animation-duration: 14s;
  -moz-animation-direction: normal;
  -moz-animation-iteration-count: infinite;
  animation-name: camerawork;
  animation-timing-function: linear;
  animation-duration: 14s;
  animation-direction: normal;
  animation-iteration-count: infinite;
}

@-webkit-keyframes camerawork {
    0% {
        -webkit-transform: translate3d(0px, 0px, -100px) rotateX(40deg) rotateZ(0deg);
    }
    25% {
        -webkit-transform: translate3d(0px, 0px, -250px) rotateX(20deg) rotateZ(90deg);
    }
    50% {
        -webkit-transform: translate3d(0px, 0px, -400px) rotateX(70deg) rotateZ(180deg);
    }
    75% {
        -webkit-transform: translate3d(0px, 0px, -250px) rotateX(120deg)...