3D walking robot

3d-walking-robot.markdown

3D walking robot

A Pen by Peiwen Lu on CodePen.

License.

index.haml

%h1 For best view please use Chrome!
#robot
  #head
    .front
    .back
    .left
    .right
  #torso
    .front
    .back
    .left
    .right
  #left_arm
    .upper_arm
      .front
      .back
      .left
      .right
      .top
      .bottom
    .forearm
      .front
      .back
      .left
      .right
      .top
      .bottom
  #right_arm
    .upper_arm
      .front
      .back
      .left
      .right
      .top
      .bottom
    .forearm
      .front
      .back
      .left
      .right
      .top
      .bottom
  #left_leg
    .thigh
      .front
      .back
      .left
      .right
      .top
      .bottom
    .lower_leg
      .front
      .back
      .left
      .right
      .top
      .bottom
  #right_leg
    .thigh
      .front
      .back
      .left
      .right
      .top
      .bottom
    .lower_leg
      .front
      .back
      .left
      .right
      .top
      .bottom

style.sass

@import compass

$bg: #f6f5f1
$front: #9aacb1
$back: $front
$left: lighten($front, 10%)
$right: $left
$top: darken($front, 5%)
$bottom: $top

/* -------------------------------------
 * Style
 * ------------------------------------- */

body
  padding: 50px
  background: radial-gradient(1000px, $bg, darken($bg, 20%))
  background-repeat: no-repeat
  background-attachment: fixed

h1
  color: $front
  font: 24px Verdana, sans-serif
  font-weight: normal
  
#robot
  width: 300px
  height: 620px
  margin: 50px auto 0
  position: relative
  transform-style: preserve-3d
  transform-origin: 50% 0 -30px
  animation: spin 60s linear infinite

/*------- robot body -------*/

#head
  width: 60px
  height: 60px
  position: absolute
  top: 0
  left: 120px
#torso
  width: 200px
  height: 230px
  position: absolute
  top: 80px
  left: 50px
// arms
#left_arm
  width: 25px
  height: 240px
  position: absolute
  top: 110px
  left: 30px
#right_arm
  width: 25px
  height: 240px
  position: absolute
  top: 110px
  right: 30px
.upper_arm
  width: 25px
  height: 100px
  position: relative
  transform-style: preserve-3d // firefox
.forearm
  width: 25px
  height: 120px
  margin-top: 20px
// legs
#left_leg
  width: 30px
  height: 340px
  position: absolute
  top: 280px
  left: 85px
#right_leg
  width: 30px
  height: 340px
  position: absolute
  top: 280px
  right: 85px
.thigh
  width: 30px
  height: 150px
  position: relative
  transform-style: preserve-3d //firefox
.lower_leg
  width: 30px
  height: 170px
  margin-top: 20px

/*------- 3d effects -------*/

.front
  width: inherit
  height: inherit
  background: $front
  position: absolute
.back
  width: inherit
  height: inherit
  background: $back
  position: absolute
.left
  width: inherit
  height: inherit
  position: absolute
  background: $left
  transform-origin: 0 0 0
  transform: rotateY(90deg)
.right
  width: inherit
  height: inherit
  position: absolute
  background: $right
  transform-origin: 100% 0 0
  transform: rotateY(-90deg)
.top
  width: inherit
  background: $top
  position: absolute
  transform-origin: 0 0 0
  transform: rotateX(-90deg)
.bottom
  width: inherit
  background: $top
  position: absolute
  transform-origin: 0 0 0
  transform: rotateX(-90deg)

#head
  transform-style: preserve-3d
  transform-origin: 50% 0 -30px
  animation: torso 0.8s ease-in-out infinite alternate
  .back
    transform: translateZ(-60px)

#torso
  transform-style: preserve-3d
  transform-origin: 50% 0 -30px
  animation: torso 0.8s ease-in-out infinite alternate
  .front
    width: 0
    height: 0
    background: none
    border-top: 230px solid $front
    border-left: 100px solid transparent
    border-right: 100px solid transparent
  .back
    width: 0
    height: 0
    background: none
    border-top: 230px solid $back
    border-left: 100px solid transparent
    border-right: 100px solid transparent
    transform: translateZ(-60px)
  .left
    width: 60px
    height: 250px
    transform: rotateY(90deg) rotateX(23.5deg)
  .right
    width: 60px
    height: 250px
    transform: rotateY(-90deg) rotateX(23.5deg)
    right: 0

#left_arm, #right_arm
  transform-style: preserve-3d
  transform-origin: 0 0 -10px
  animation: arm 0.8s ease-in-out infinite alternate
  .back
    transform: translateZ(-25px)
  .top
    height: 25px
  .bottom
    height: 25px
    bottom: -25px
#right_arm
  animation-delay: 0.8s
  .forearm
    animation-delay: 0.8s
.forearm
  transform-style: preserve-3d
  transform-origin: 0 0 0
  animation: forearm 0.8s ease-in-out infinite alternate

#left_leg, #right_leg
  transform-style: preserve-3d
  transform-origin: 0 0 -20px
  animation: leg 0.8s ease-in-out infinite alternate
  .back
    transform: translateZ(-30px)
  .top
    height: 30px
  .bottom
    height: 30px
    bottom: -30px
#left_leg
  animation-delay: 0.8s
  .lower_leg
    animation-delay: 0.8s
.lower_leg
  transform-style: preserve-3d
  transform-origin: 0 0 0
  animation: lower_leg 0.8s ease-in-out infinite alternate

/*------- animation -------*/

@keyframes spin
  0%
    transform: rotateY(0deg)
  100%
    transform: rotateY(360deg)

@keyframes torso
  0%
    transform: rotateY(-7deg)
  100%
    transform: rotateY(7deg)

@keyframes arm
  0%
    transform: rotateX(-15deg) translateZ(-20px) // note
  100%
    transform: rotateX(20deg) translateZ(-20px) // note

@keyframes forearm
  0%
    transform: rotateX(0deg)
  100%
    transform: rotateX(60deg)

@keyframes leg
  0%
    transform: rotateX(-5deg) translateZ(-15px) // note
  100%
    transform: rotateX(25deg) translateZ(-15px) // note

@keyframes lower_leg
  0%
    transform: rotateX(0deg) translateY(15px)
  100%
    transform: rotateX(-50deg) translateY(15px)

// note: should remove translateZ for Safari. It is really weird that Safari and Chrome use different method to treat transform-origin property.

done