JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class="nikegame-hurdle">
  <div class="hurdletopfront"></div>
  <div class="hurdletopback"></div>
  <div class="hurdletop"></div>
  <div class="hurdletopleft"></div>
  <div class="hurdletopright"></div>
  <div class="hurdlepostleftfront"></div>
  <div class="hurdlepostleftside"></div>
  <div class="hurdlepostrightfront"></div>
  <div class="hurdlepostrightside"></div>
  <div class="hurdlepostleftfoot"></div>
  <div class="hurdlepostrightfoot"></div>
</div>

CSS

html{
  height:100%;
}
body{
  width:100%;
  height:100%;
  margin:0px;
  perspective:500px;
  
}
@keyframes rotateworld{
  0% { transform: rotateY(0deg) }
  100% { transform: rotateY(360deg) }
}
.nikegame-hurdle{
  position:absolute;
  left:50%;
  top:50%;
  width:0px;
  height:0px;
  transform-style:preserve-3d;
  pointer-events:none;
  transform-style:preserve-3d;
  animation-name:rotateworld;
  animation-duration: 10s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
.nikegame-hurdle>div{
  position:absolute;
  top:0px;
  left:0px;
  backface-visibility:hidden;
}
.nikegame-hurdle .hurdletop{
  width:400px;
  height:50px;
  background-image:url(https://aninoob.com/games/vr/editor/texture.library/Demos/NikeGame/hurdle.bar.400x50.png);
  background-size:cover;
  transform:rotateX(90deg) translateZ(25px) translateX(-200px);
  z-index:10;
}
.nikegame-hurdle .hurdletopfront{
  width:400px;
  height:50px;
  background-image:url(https://aninoob.com/games/vr/editor/texture.library/Demos/NikeGame/hurdle.bar.400x50.png);
  background-size:cover;
  transform:rotateY(0deg) translateZ(25px) translateX(-200px);
  z-index:10;
}
.nikegame-hurdle .hurdletopback{
  width:400px;
  height:50px;
  background-image:url(https://aninoob.com/games/vr/editor/texture.library/Demos/NikeGame/hurdle.bar.400x50.png);
  background-size:cover;
  transform:rotateY(180deg) translateZ(25px)  translateY(0px) translateX(200px);
  z-index:10;
}
.nikegame-hurdle .hurdletopleft{
  width:50px;
  height:50px;
  background-image:url(https://aninoob.com/games/vr/editor/texture.library/Demos/NikeGame/hurdle.post.15x250.png);
  background-size:cover;
  transform:rotateY(-90deg) translateZ(225px);
  z-index:10;
}
.nikegame-hurdle .hurdletopright{
  width:50px;
  height:50px;
  background-image:url(https://aninoob.com/games/vr/editor/texture.library/Demos/NikeGame/hurdle.post.15x250.png);
  background-size:cover;
  transform:rotateY(90deg) translateZ(175px);
 ...