mixin ladder_inner
  .ladder_left
  .ladder_right
  .ladder_steps
    .ladder_step
    .ladder_step
    .ladder_step
    .ladder_step
    .ladder_step

mixin ladder
  .ladder_wrapper.ladder_shadow
    +ladder_inner
  .ladder_wrapper.ladder_main
    +ladder_inner

#trick_art
  .paper
    .slice.top
      +ladder
    .slice.bottom
      +ladder
View Compiled
$paperGradient: linear-gradient(0deg, rgba(240, 240, 240, 1) 0%,rgba(255, 255, 255, 1) 100%);
$ladderMainColor: rgba(0, 0, 0, 1);
$ladderShadowColor: rgba(0, 0, 0, 0.2);
$ladderWidth: 5px;
$ladderMargin: 25px;

body {
  background: linear-gradient(-45deg, rgba(235,70,130,1) 0%,rgba(70,100,255,1) 100%);
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 700px;
}

#trick_art {
  transform-style: preserve-3d;
  transform: rotateY(35deg);
  animation: trickArt 4000ms 1000ms cubic-bezier(0.545, 0.080, 0.520, 0.975) infinite alternate;
  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0.1) 100%);
    transform: rotateX(-90deg) translateZ(100px);
  }
  .paper {
    width: 300px;
    height: 350px;
    transform-style: preserve-3d;
    transform: rotateX(45deg);
    .slice {
      position: relative;
      width: 100%;
      height: 50%;
      background: $paperGradient;
      overflow: hidden;
      transform-origin: 0 100%;
      .ladder_wrapper {
        position: absolute;
        left: calc(50% - 20px);
        width: 100%;
        height: 70%;
        transform-origin: 0 0;
        &.ladder_shadow {
          filter: blur(3px);
          .ladder_left, .ladder_right {
            background: $ladderShadowColor;
          }
        }
        &.ladder_main {
          .ladder_left, .ladder_right {
            background: $ladderMainColor;
          }
        }
      }
      .ladder_left {
        position: absolute;
        width: $ladderWidth;
        height: 100%;
      }
      .ladder_right {
        position: absolute;
        left: 10%;
        width: $ladderWidth;
        height: 100%;
      }
      .ladder_steps {
        .ladder_step {
          position: absolute;
          width: 35px;
          height: $ladderWidth;
          @for $i from 0 through 6 {
            &:nth-child(#{$i + 1}) {
              top: ($i + 1) * $ladderMargin;
            }
          }
        }
      }
      .ladder_shadow {
        .ladder_step {
          background: $ladderShadowColor;
        }
      }
      .ladder_main {
        .ladder_step {
          background: $ladderMainColor;
        }
      }
      &.top {
        transform: rotateX(-90deg);
        animation: paper 4000ms  1000ms ease-in-out infinite alternate;
        .ladder_wrapper {
          bottom: 0;
          &.ladder_main {
            transform: skew(30deg);
          }
        }
      }
      &.bottom {
        .ladder_wrapper {
          &.ladder_main {
            transform-origin: 0 100%;
            transform: skew(-30deg);
          }
          .ladder_steps {
            position: absolute;
            top: -$ladderMargin;
          }
        }
      }
    }
  }
}

@keyframes trickArt {
  0% {
    transform: rotateY(35deg);
  }
  25% {
    transform: rotateY(35deg);
  }
  80% {
    transform: rotateY(360deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes paper {
  0% {
    transform: rotateX(-90deg);
  }
  25% {
    transform: rotateX(-90deg);
  }
  95% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.