JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class="floor"></div>
<div class="spider">
  <div class="leg left leg-l-1"><div></div></div>
  <div class="leg left leg-l-2"><div></div></div>
  <div class="leg left leg-l-3"><div></div></div>
  <div class="leg left leg-l-4"><div></div></div>
  <div class="body"></div>
  <div class="leg right leg-r-1"><div></div></div>
  <div class="leg right leg-r-2"><div></div></div>
  <div class="leg right leg-r-3"><div></div></div>
  <div class="leg right leg-r-4"><div></div></div>
</div>

CSS

html{
  height:100%;
}
body{
  height:100%;
  perspective:500px;
  perspective-origin:50% 25%;
}
.floor{
  position:absolute;
  top:50%;
  left:50%;
  width:500px;
  height:500px;
  margin-left:-250px;
  margin-top:-250px;
  transform:rotateX(90deg);
  background-color:#666;
}
.spider{
  position:absolute;
  top:50%;
  left:50%;
  transform:rotateX(90deg) rotateZ(50deg);
  transform-style:preserve-3d;
  animation: spiderspin infinite 3s linear;
}
@keyframes spiderspin{
  0% { transform:rotateX(90deg) translateY(-400px); }
  100% { transform:rotateX(90deg) translateY(400px); }
}
.spider>.body{
  width:40px;
  height:80px;
  background-color:#333;
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-20px;
  margin-top:-40px;
  border-radius:50%;
  transform:translateZ(2px)
}
.spider>.leg{
  background-color:#000;
  transform-origin:0% 50%;
  position:absolute;
  top:50%;
  left:50%;
  transform-style:preserve-3d;
}
.spider>.leg.left{
  animation: spiderwalking infinite .5s;
}
.spider>.leg.right{
  animation: spiderwalkingr infinite .5s;
}
@keyframes spiderwalking{
  0% { transform:rotateZ(190deg) rotateY(40deg); }
  60% { transform:rotateZ(170deg) rotateY(20deg); }
  100% { transform:rotateZ(190deg) rotateY(40deg); }
}
@keyframes spiderwalkingr{
  0% { transform:rotateZ(0deg) rotateY(40deg); }
  60% { transform:rotateZ(-10deg) rotateY(20deg); }
  100% { transform:rotateZ(0deg) rotateY(40deg); }
}
.spider>.leg>div{
  animation: spiderwalkingl infinite .5s;
}
@keyframes spiderwalkingl{
  0% { transform:translateY(2px) rotateY(60deg) rotateZ(-10deg); }
  60% { transform:translateY(2px) rotateY(30deg) rotateZ(10deg); }
  100% { transform:translateY(2px) rotateY(60deg) rotateZ(-10deg); }
}
.spider>.leg-l-1.left{
  transform:rotateZ(180deg) rotateY(20deg);
  width:20px;
  height:10px;
  margin-top:-30px;
  margin-left:-10px;
  animation-delay:100ms;
}
.spider>.leg-l-2.left{
  transform:rotateZ(180deg) rotateY(20deg);
  width:30px;
  height:10px;
 ...