Potongan kertas kad manila pink yang berpaling, lari setempat

Demo

Hei Pink Kaler! Nak gi mana?

<h2 style="font-family: Georgia; color: #e69138;">Hei Pink Kaler! Nak gi mana?</h2>
<div class="labu">
  <div class="paper_man_wrapper">
  <div class="paper_man">
    <div class="paper_man_body part">
      <div class="paper_man_head part"></div>
      <div class="paper_man_arm left">
        <div class="paper_man_arm_1 part">
          <div class="paper_man_arm_2 part">
            <div class="paper_man_arm_hand part"></div>
          </div>
        </div>
      </div>
      <div class="paper_man_arm right">
        <div class="paper_man_arm_1 part">
          <div class="paper_man_arm_2 part">
            <div class="paper_man_arm_hand part"></div>
          </div>
        </div>
      </div>
      <div class="paper_man_leg left">
        <div class="paper_man_leg_1 part">
          <div class="paper_man_leg_2 part">
            <div class="paper_man_leg_foot part"></div>
          </div>
        </div>
      </div>
      <div class="paper_man_leg right">
        <div class="paper_man_leg_1 part">
          <div class="paper_man_leg_2 part">
            <div class="paper_man_leg_foot part"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
<style>
  .labu {
  height: 50vh;
  overflow: hidden;
  display: flex;
  font-family: "Anton", sans-serif;
  justify-content: center;
  align-items: center; 
}
.labu * {
  transform-style: preserve-3d;
}
.labu div {
  position: absolute;
  transform-style: preserve-3d;
}
.paper_man_wrapper {
  -webkit-animation: cameraY 7000ms linear infinite;
          animation: cameraY 7000ms linear infinite;
}
.paper_man {
  top: -50px;
  left: -50px;
  -webkit-animation: jump 250ms -110ms ease-in-out infinite alternate;
          animation: jump 250ms -110ms ease-in-out infinite alternate;
}
.paper_man .part {
  background: pink;
}
.paper_man .part::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #666;
  transform: translateZ(-1px);
}
.paper_man_body {
  transform-origin: 50% 100%;
  transform: rotateX(-20deg);
  width: 60px;
  height: 100px;
  -webkit-animation: shake4 2000ms -100ms ease-in-out infinite;
          animation: shake4 2000ms -100ms ease-in-out infinite;
}
.paper_man_head {
  transform-origin: 50% 100%;
  top: -40px;
  left: calc(50% - 20px);
  width: 40px;
  height: 40px;
  transform: rotateX(-10deg);
  -webkit-animation: shake4 1000ms -800ms ease-in-out infinite;
          animation: shake4 1000ms -800ms ease-in-out infinite;
}
.paper_man_arm.left {
  transform-origin: 0 0;
  right: 0px;
  -webkit-animation: shake1 1000ms -400ms ease-in-out infinite;
          animation: shake1 1000ms -400ms ease-in-out infinite;
}
.paper_man_arm.right {
  transform-origin: 100% 0;
  left: -20px;
  -webkit-animation: shake1 1000ms -900ms ease-in-out infinite;
          animation: shake1 1000ms -900ms ease-in-out infinite;
}
.paper_man_arm_1 {
  transform-origin: 50% 0;
  width: 20px;
  height: 50px;
}
.paper_man_arm_2 {
  transform-origin: 50% 0;
  bottom: -50px;
  width: 20px;
  height: 50px;
}
.left .paper_man_arm_2 {
  -webkit-animation: shake3 1000ms -800ms ease-in-out infinite;
          animation: shake3 1000ms -800ms ease-in-out infinite;
}
.right .paper_man_arm_2 {
  -webkit-animation: shake3 1000ms -300ms ease-in-out infinite;
          animation: shake3 1000ms -300ms ease-in-out infinite;
}
.paper_man_arm_hand {
  transform-origin: 50% 0;
  bottom: -15px;
  width: 20px;
  height: 15px;
}
.left .paper_man_arm_hand {
  -webkit-animation: shake3 1000ms -200ms ease-in-out infinite;
          animation: shake3 1000ms -200ms ease-in-out infinite;
}
.right .paper_man_arm_hand {
  -webkit-animation: shake3 1000ms -700ms ease-in-out infinite;
          animation: shake3 1000ms -700ms ease-in-out infinite;
}
.paper_man_leg {
  transform-origin: 50% 0;
  top: 100px;
}
.paper_man_leg.left {
  right: 30px;
  -webkit-animation: shake1 1000ms ease-in-out infinite;
          animation: shake1 1000ms ease-in-out infinite;
}
.paper_man_leg.right {
  left: 0;
  -webkit-animation: shake1 1000ms -500ms ease-in-out infinite;
          animation: shake1 1000ms -500ms ease-in-out infinite;
}
.paper_man_leg_1 {
  transform-origin: 50% 0;
  width: 30px;
  height: 50px;
}
.paper_man_leg_2 {
  transform-origin: 50% 0;
  bottom: -40px;
  width: 30px;
  height: 40px;
}
.left .paper_man_leg_2 {
  -webkit-animation: shake2 1000ms -600ms ease-in-out infinite;
          animation: shake2 1000ms -600ms ease-in-out infinite;
}
.right .paper_man_leg_2 {
  -webkit-animation: shake2 1000ms -100ms ease-in-out infinite;
          animation: shake2 1000ms -100ms ease-in-out infinite;
}
.paper_man_leg_foot {
  transform-origin: 50% 0;
  bottom: -20px;
  width: 30px;
  height: 20px;
}
.left .paper_man_leg_foot {
  -webkit-animation: shake3 1000ms -400ms ease-in-out infinite;
          animation: shake3 1000ms -400ms ease-in-out infinite;
}
.right .paper_man_leg_foot {
  -webkit-animation: shake3 1000ms -900ms ease-in-out infinite;
          animation: shake3 1000ms -900ms ease-in-out infinite;
}
@-webkit-keyframes shake1 {
  0% {
    transform: rotateX(80deg);
  }
  50% {
    transform: rotateX(-80deg);
  }
  100% {
    transform: rotateX(80deg);
  }
}
@keyframes shake1 {
  0% {
    transform: rotateX(80deg);
  }
  50% {
    transform: rotateX(-80deg);
  }
  100% {
    transform: rotateX(80deg);
  }
}
@-webkit-keyframes shake2 {
  0% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(-100deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}
@keyframes shake2 {
  0% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(-100deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}
@-webkit-keyframes shake3 {
  0% {
    transform: rotateX(10deg);
  }
  50% {
    transform: rotateX(120deg);
  }
  100% {
    transform: rotateX(10deg);
  }
}
@keyframes shake3 {
  0% {
    transform: rotateX(10deg);
  }
  50% {
    transform: rotateX(120deg);
  }
  100% {
    transform: rotateX(10deg);
  }
}
@-webkit-keyframes shake4 {
  0% {
    transform: rotateX(-30deg);
  }
  50% {
    transform: rotateX(-10deg);
  }
  100% {
    transform: rotateX(-30deg);
  }
}
@keyframes shake4 {
  0% {
    transform: rotateX(-30deg);
  }
  50% {
    transform: rotateX(-10deg);
  }
  100% {
    transform: rotateX(-30deg);
  }
}
@-webkit-keyframes cameraY {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes cameraY {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@-webkit-keyframes cameraX {
  0% {
    transform: rotateX(-50deg);
  }
  100% {
    transform: rotateX(50deg);
  }
}
@keyframes cameraX {
  0% {
    transform: rotateX(-50deg);
  }
  100% {
    transform: rotateX(50deg);
  }
}
@-webkit-keyframes jump {
  0% {
    transform: rotateX(10deg) translateY(0);
  }
  100% {
    transform: rotateX(20deg) translateY(-30px);
  }
}
@keyframes jump {
  0% {
    transform: rotateX(10deg) translateY(0);
  }
  100% {
    transform: rotateX(20deg) translateY(-30px);
  }
}
</style>

Rujukan CSS di codepen.io/YusukeNakaya/pen/vdjpyr