JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class="aninoob-steeringwheel">
  <div class="aninoob-steeringwheel-0"></div>
  <div class="aninoob-steeringwheel-1"></div>
  <div class="aninoob-steeringwheel-2"></div>
  <div class="aninoob-steeringwheel-3"></div>
  <div class="aninoob-steeringwheel-4"></div>
  <div class="aninoob-steeringwheel-5"></div>
  <div class="aninoob-steeringwheel-6"></div>
</div>

CSS

html{
  height:100%;
}
body{
  width:100%;
  height:100%;
  margin:0px;
  perspective:500px;
  
}
.aninoob-steeringwheel{
  position:absolute;
  left:50%;
  top:50%;
  width:0px;
  height:0px;
  transform-style:preserve-3d;
  pointer-events:none;
  transform-style:preserve-3d;
  transform:rotateX(15deg);
  transition:all .6s;
}
.aninoob-steeringwheel.turnleft-min{
  transform: rotateX(15deg) rotateZ(-30deg);
}
.aninoob-steeringwheel.turnleft-med{
  transform: rotateX(15deg) rotateZ(-50deg);
}
.aninoob-steeringwheel.turnleft-max{
  transform: rotateX(15deg) rotateZ(-110deg);
}
.aninoob-steeringwheel.turnright-min{
  transform: rotateX(15deg) rotateZ(30deg);
}
.aninoob-steeringwheel.turnright-med{
  transform: rotateX(15deg) rotateZ(50deg);
}
.aninoob-steeringwheel.turnright-max{
  transform: rotateX(15deg) rotateZ(110deg);
}
.aninoob-steeringwheel>div{
  position:absolute;
  top:0px;
  left:0px;
  backface-visibility:visible;
}
.aninoob-steeringwheel .aninoob-steeringwheel-0{
  width:400px;
  height:400px;
  background-image:url(https://aninoob.com/games/vr/noob.racer.assets/steering.wheel.1.png?1);
  background-size:cover;
  transform:translateX(-200px) translateY(-200px) translateZ(0px);
  transform-origin:50% 50%;
  z-index:10;
}
.aninoob-steeringwheel .aninoob-steeringwheel-1{
  width:400px;
  height:400px;
  background-image:url(https://aninoob.com/games/vr/noob.racer.assets/steering.wheel.2.png);
  background-size:cover;
  transform:translateX(-200px) translateY(-200px) translateZ(10px);
  transform-origin:50% 50%;
  z-index:10;
}
.aninoob-steeringwheel .aninoob-steeringwheel-2{
  width:400px;
  height:400px;
  background-image:url(https://aninoob.com/games/vr/noob.racer.assets/steering.wheel.3.png);
  background-size:cover;
  transform:translateX(-200px) translateY(-200px) translateZ(20px);
  transform-origin:50% 50%;
  z-index:10;
}
.aninoob-steeringwheel .aninoob-steeringwheel-3{
  width:400px;
  height:400px;
 ...