Only CSS: Truck a GO, GO!

index.pug

p.nu-title Nu Chwezi KIDS

#truck
  .body
    .shadow
    .cockpit
      .front
      .back
      .left
      .right
      .top
      .bottom
      .front_window.window
      .left_window.window
      .right_window.window
      .handle
      .left_seat_back
      .left_seat_bottom
      .right_seat_back
      .right_seat_bottom
      .left_headlight
      .right_headlight
    .bed
      .front
      .left
      .right
      .back
      .bottom
    .tire
      .front_tire
        .shaft.shaft_a
        .shaft.shaft_b
        .left
        .right
      .rear_tire
        .shaft.shaft_a
        .shaft.shaft_b
        .left
        .right
       
div.nu-page 
 div.page
   p.nu-content As a child, I had a dream. It was simple and almost binary; the class or the forest? I so much wanted the forest, knowing how much adventure awaited there. But, as I stood there, next to the shrine of Mary of Africa, I decided right - I went back to the class. Left my other friends to go, and I instead followed my other passion at the time - toys and making them! There was a single icon in this dream - a really funky truck, levitating, and moving in circles, above the class. I knew even though I were dreaming, that class was it then, but later, I would have the chance to return to the forest all I want. And So It Is. I now return to the forest, bringing the class with me, unto you my other brethren and sisters, children and grandchildren. The forest is good, but we also need class. I have built a Nu kind of classroom for you. It shall forever exist - as long as you keep my machines alive. I shall teach you all you want, all I can, from wherever you shall be. Be curious, explore, virtue or vice, but don't forget the class. Always carry a notebook and pen/cil, tape-measure, a nail, scissors, binoculars, a smart-phone/computer and solar-powered generator. Go on, be masters over the jungle, the beasts, poverty, illness and all else. Be Aware of your Dreams, Always! And ACT, to manifest them. We are Nu Chwezi People. Never forget that! The Origin and Future of All Mankind.
   
   p.sign - Mugasha Mukasa AK1N Nemesis Fixx The 1st Nu Chwezi.

only-css-truck-a-go-go.markdown

Only CSS: Truck a GO, GO!

3D truck :) GO, GO!

A Pen by AK1N Nemesis Fixx (Fra. Mugasha~Mukasa) The First Nu Chwezi on CodePen.

License.

style.scss

$baseColorR: random(200);
$baseColorG: random(200);
$baseColorB: random(200);
$bodyColor: linear-gradient(
  45deg,
  rgba($baseColorR, $baseColorG, $baseColorB, 1) 0%,
  rgba($baseColorR + 50, $baseColorG + 50, $baseColorB + 50, 1) 100%
);
$windowColor: rgba(0, 100, 255, 0.3);
$tireColor: rgba(0, 0, 0, 1);
$wheelColor: rgba(100, 100, 100, 1);
$lightColor: rgba(random(100) + 155, random(100) + 155, random(100) + 155, 1);
$shadowColor: rgba(150, 150, 150, 1);

body {
  background: #fff;
  height: 100vh;
  overflow: hidden;
  display: flex;
  font-family: "Anton", sans-serif;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
}
div {
  position: absolute;
  transform-style: preserve-3d;
  background: $bodyColor;
  box-sizing: border-box;
}
.window {
  background: $windowColor;
}

/*-------- hack & evolve... */
.nu-title {
  color: black;

  font-size: xx-large;
}

.page {
  background: #fff !important;
  width:666px;
  top:200px;
  left:-300px;
}

body {
  overflow: auto;
}
/*--------- end hacks -------- */

#truck {
  animation: drive 10000ms linear infinite;
  .body {
    width: 100px;
    transform: translate(200px, -100px) translateZ(100px);
  }
  .shadow {
    width: 100px;
    height: 150px;
    background: $shadowColor;
    transform-origin: 50% 100%;
    transform: translate(0, -70px) rotateX(90deg);
    filter: blur(10px);
    backface-visibility: hidden;
  }
  .cockpit {
    animation: bounce 600ms ease-out infinite alternate;
    .front {
      width: 100px;
      height: 50px;
    }
    .back {
      width: 100px;
      height: 75px;
      transform: translate(0, -50px) translateZ(-50px);
    }
    .top {
      width: 100px;
      height: 25px;
      transform-origin: 50% 100%;
      transform: translate(0, -75px) translateZ(-25px) rotateX(90deg);
    }
    .bottom {
      width: 100px;
      height: 50px;
      transform-origin: 50% 100%;
      transform: translate(0, -25px) rotateX(90deg);
    }
    .left {
      width: 50px;
      height: 100px;
      transform-origin: 0 0;
      transform: translate(100px, -50px) rotateY(90deg);
      clip-path: polygon(
        0% 50%,
        50% 50%,
        50% 0%,
        100% 0%,
        100% 75%,
        60% 75%,
        40% 100%,
        0% 100%
      );
    }
    .right {
      width: 50px;
      height: 100px;
      transform-origin: 100% 0;
      transform: translate(-50px, -50px) rotateY(-90deg);
      clip-path: polygon(
        101% 50%,
        50% 50%,
        50% 0%,
        0% 0%,
        0% 75%,
        40% 75%,
        60% 100%,
        101% 100%
      );
    }
    .left_headlight {
      width: 25px;
      height: 10px;
      background: $lightColor;
      border-radius: 3px;
      transform: translate(5px, 20px) translateZ(1px);
    }
    .right_headlight {
      width: 25px;
      height: 10px;
      background: $lightColor;
      border-radius: 3px;
      transform: translate(70px, 20px) translateZ(1px);
    }
    .left_window {
      width: 25px;
      height: 50px;
      transform-origin: 0 0;
      transform: translate(100px, -50px) rotateY(90deg);
      clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
    }
    .right_window {
      width: 25px;
      height: 50px;
      transform-origin: 100% 0;
      transform: translate(-25px, -50px) rotateY(-90deg);
      clip-path: polygon(100% 100%, 0% 0%, 0% 100%);
    }
    .front_window {
      width: 100px;
      height: 50px;
      transform-origin: 50% 100%;
      transform: translate(0, -50px) rotateX(26deg) scaleY(1.12);
      &::before {
        content: "";
        position: absolute;
        width: 5px;
        height: 100%;
        background: $bodyColor;
      }
      &::after {
        content: "";
        position: absolute;
        right: 0;
        width: 5px;
        height: 100%;
        background: $bodyColor;
      }
    }
    .handle {
      width: 30px;
      height: 30px;
      border-radius: 100%;
      background: none;
      border: 5px solid rgba($baseColorR, $baseColorG, $baseColorB, 1);
      transform: translate(10px, -10px) translateZ(-10px) rotateX(-20deg);
    }
    .left_seat_back {
      width: 30px;
      height: 50px;
      background: dimgray;
      transform-origin: 50% 100%;
      transform: translate(60px, -30px) translateZ(-40px) rotateX(10deg);
      border-radius: 5px 5px 0 0;
    }
    .left_seat_bottom {
      width: 30px;
      height: 20px;
      background: dimgray;
      transform-origin: 50% 100%;
      transform: translate(60px, 0px) translateZ(-20px) rotateX(90deg);
    }
    .right_seat_back {
      width: 30px;
      height: 50px;
      background: dimgray;
      transform-origin: 50% 100%;
      transform: translate(10px, -30px) translateZ(-40px) rotateX(10deg);
      border-radius: 5px 5px 0 0;
    }
    .right_seat_bottom {
      width: 30px;
      height: 20px;
      background: dimgray;
      transform-origin: 50% 100%;
      transform: translate(10px, 0px) translateZ(-20px) rotateX(90deg);
    }
  }
  .bed {
    animation: bounce 600ms 200ms ease-out infinite alternate;
    .front {
      width: 100px;
      height: 100px;
      transform: translate(0px, -50px) translateZ(-60px);
    }
    .left {
      width: 100px;
      height: 50px;
      transform-origin: 0 0;
      transform: translate(100px, 0) translateZ(-60px) rotateY(90deg);
      clip-path: polygon(
        0% 0%,
        100% 0%,
        100% 100%,
        90% 100%,
        80% 50%,
        60% 50%,
        50% 100%,
        0% 100%
      );
    }
    .right {
      width: 100px;
      height: 50px;
      transform-origin: 100% 0;
      transform: translate(-100px, 0) translateZ(-60px) rotateY(-90deg);
      clip-path: polygon(
        0% 0%,
        100% 0%,
        100% 100%,
        50% 100%,
        40% 50%,
        20% 50%,
        10% 100%,
        0% 100%
      );
    }
    .back {
      width: 100px;
      height: 50px;
      transform: translate(0, 0) translateZ(-160px);
    }
    .bottom {
      width: 100px;
      height: 100px;
      transform-origin: 50% 100%;
      transform: translate(0, -75px) translateZ(-60px) rotateX(90deg);
    }
  }
  .tire {
    .front_tire {
      transform: translate(0, 30px) translateZ(-35px);
    }
    .rear_tire {
      transform: translate(0, 30px) translateZ(-130px);
    }
    .left {
      width: 50px;
      height: 50px;
      border-radius: 100%;
      background: $wheelColor;
      border: 12px solid $tireColor;
      transform: translate(70px, 0) rotateY(90deg);
    }
    .right {
      width: 50px;
      height: 50px;
      border-radius: 100%;
      background: $wheelColor;
      border: 10px solid $tireColor;
      transform: translate(-20px, 0) rotateY(-90deg);
    }
    .shaft {
      width: 90px;
      height: 10px;
      background: $wheelColor;
      transform: translate(5px, 20px);
    }
    .shaft_b {
      transform: translate(5px, 20px) rotateX(90deg);
    }
  }
}
@keyframes drive {
  0% {
    transform: rotateX(-30deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(-30deg) rotateY(-360deg);
  }
}
@keyframes bounce {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-20px);
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet" />