cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              p Reload to change color
#road
  .shadow
  .bike
    - for (var i = 0; i < 10; i++)
      .wind
    .bike_body
      .bike_body_pedal
        .arm_a
          .bike_body_frame_side_a
          .bike_body_frame_side_b
          .pedal_a
            .bike_body_frame_side_a
            .bike_body_frame_side_b
        .arm_b
          .bike_body_frame_side_a
          .bike_body_frame_side_b
          .pedal_b
            .bike_body_frame_side_a
            .bike_body_frame_side_b
      .bike_body_saddle
        .bike_body_saddle_side_a
        .bike_body_saddle_side_b
      .bike_body_rear
        .arm_a
          .bike_body_frame_side_a
          .bike_body_frame_side_b
        .arm_b
          .bike_body_frame_side_a
          .bike_body_frame_side_b
        .arm_c
          .bike_body_frame_side_a
          .bike_body_frame_side_b
        .arm_d
          .bike_body_frame_side_a
          .bike_body_frame_side_b
      .bike_body_triangle
        .side_a
          .bike_body_frame_1
          .bike_body_frame_2
          .bike_body_frame_3
        .side_b
          .bike_body_frame_1
          .bike_body_frame_2
          .bike_body_frame_3
      .bike_body_front
        .side_a
          .bike_body_frame_1
          .bike_body_frame_2
        .side_b
          .bike_body_frame_1
          .bike_body_frame_2
        .side_c
          .bike_body_frame_side_a
          .bike_body_frame_side_b
        .arm_a
          .bike_body_frame_side_a
          .bike_body_frame_side_b
        .arm_b
          .bike_body_frame_side_a
          .bike_body_frame_side_b
    .bike_tire.front
      .rotate_tire
        .side_a
          - for (i = 0; i < 36; i++)
            .bike_tire_frame
        .side_b
          - for (i = 0; i < 36; i++)
            .bike_tire_frame
        .side_c
          - for (i = 0; i < 36; i++)
            .bike_tire_frame
    .bike_tire.rear
      .rotate_tire
        .side_a
          - for (i = 0; i < 36; i++)
            .bike_tire_frame
        .side_b
          - for (i = 0; i < 36; i++)
            .bike_tire_frame
        .side_c
          - for (i = 0; i < 36; i++)
            .bike_tire_frame
            
          
!
            
              $R: random(155) + 100;
$G: random(155) + 100;
$B: random(155) + 100;
$frameColor1: linear-gradient(to bottom, rgba($R, $G, $B, 1) 0%, rgba($R - 50, $G - 50, $B - 50, 1) 100%);
$frameColor2: linear-gradient(to bottom, rgba($R - 50, $G - 50, $B - 50, 1) 0%, rgba($R - 100, $G - 100, $B - 100, 1) 100%);
$rotateSpeed: 3000ms;

body {
  background: #eef;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 400px;
}
div {
  box-sizing: border-box;
  transform-style: preserve-3d;
}
p {
  position: absolute;
  font-size: 40px;
  color: rgba($R - 50, $G - 50, $B - 50, 1);
  font-family: 'Dosis', sans-serif;
  letter-spacing: 3px;
  transform: translateY(-45px);
}

#road {
  // transform: rotateY(-25deg) rotateX(-45deg);
  animation: run 10000ms linear infinite;
  
  .wind {
    position: absolute;
    left: 50%;
    width: 4px;
    height: 200px;
    margin-left: -2px;
    border-radius: 999px;
    overflow: hidden;

    @for $i from 1 through 11 {
      &:nth-child(#{$i}) {
        transform: translate3d(#{random(300) - 200}px, #{random(300) - 300}px, #{random(400) - 200}px) rotateZ(90deg);

        &::before {
          content: '';
          position: absolute;
          width: 4px;
          height: 300px;
          background: rgba($R, $G, $B, 0.3);
          border-radius: 999px;
          transform: translateY(-300px);
          animation: wind #{random(2000) + 1000}ms #{random(4000) + 1000}ms linear infinite;
        }
      }
    }
  }

  .shadow {
    position: absolute;
    width: 300px;
    height: 40px;
    background: #ddd;
    border-radius: 999px;
    transform: rotateX(90deg) translateX(-150px) translateZ(-92px);
    // filter: blur(10px);
  }
  .bike {
    position: relative;
    
    &_body {
      &_pedal {
        position: absolute;
        transform-origin: -28px 54px;
        animation: tire $rotateSpeed linear infinite;
        
        .arm_a {
          position: absolute;
          transform: rotateZ(0deg) translateZ(8px) translateX(-30px) translateY(50px);
          
          .bike_body_frame_side_a {
            position: absolute;
            height: 30px;
            width: 4px;
            background: $frameColor1;
            
            &::before {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              background: $frameColor2;
              transform-origin: 0 0;
              transform: rotateY(-90deg);
            }
            &::after {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              background: $frameColor2;
              transform-origin: 100% 0;
              transform: rotateY(90deg);
            }
          }
          .bike_body_frame_side_b {
            position: absolute;
            height: 30px;
            width: 4px;
            background: $frameColor1;
            transform: translateZ(4px);
            
            &::before {
              content: '';
              position: absolute;
              width: 4px;
              height: 4px;
              background: $frameColor2;
              transform-origin: 0 0;
              transform: rotateX(-90deg);
            }
            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              width: 4px;
              height: 4px;
              background: $frameColor2;
              transform-origin: 0 100%;
              transform: rotateX(90deg);
            }
          }
        }
        .arm_b {
          position: absolute;
          transform: rotateZ(0deg) translateZ(-12px) translateX(-30px) translateY(28px);
          
          .bike_body_frame_side_a {
            position: absolute;
            height: 30px;
            width: 4px;
            background: $frameColor1;
            
            &::before {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              background: $frameColor2;
              transform-origin: 0 0;
              transform: rotateY(-90deg);
            }
            &::after {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              background: $frameColor2;
              transform-origin: 100% 0;
              transform: rotateY(90deg);
            }
          }
          .bike_body_frame_side_b {
            position: absolute;
            height: 30px;
            width: 4px;
            background: $frameColor1;
            transform: translateZ(4px);
            
            &::before {
              content: '';
              position: absolute;
              width: 4px;
              height: 4px;
              background: $frameColor2;
              transform-origin: 0 0;
              transform: rotateX(-90deg);
            }
            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              width: 4px;
              height: 4px;
              background: $frameColor2;
              transform-origin: 0 100%;
              transform: rotateX(90deg);
            }
          }
        }
        .pedal_a {
          position: absolute;
          top: 28px;
          left: -3px;
          transform-origin: 5px 0px;
          animation: pedalA $rotateSpeed linear infinite;
          
          .bike_body_frame_side_a {
            position: absolute;
            height: 20px;
            width: 10px;
            background: $frameColor1;
            
            &::before {
              content: '';
              position: absolute;
              width: 4px;
              height: 100%;
              background: $frameColor2;
              transform-origin: 0 0;
              transform: rotateY(-90deg);
            }
            &::after {
              content: '';
              position: absolute;
              right: 0;
              width: 4px;
              height: 100%;
              background: $frameColor2;
              transform-origin: 100% 0;
              transform: rotateY(90deg);
            }
          }
          .bike_body_frame_side_b {
            position: absolute;
            height: 20px;
            width: 10px;
            background: $frameColor1;
            transform: translateZ(4px);
            
            &::before {
              content: '';
              position: absolute;
              width: 10px;
              height: 4px;
              background: $frameColor2;
              transform-origin: 0 0;
              transform: rotateX(-90deg);
            }
            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              width: 10px;
              height: 4px;
              background: $frameColor2;
              transform-origin: 0 100%;
              transform: rotateX(90deg);
            }
          }
        }
        .pedal_b {
          position: absolute;
          top: 0px;
          left: -3px;
          transform-origin: 5px 0px;
          animation: pedalB $rotateSpeed linear infinite;
          
          .bike_body_frame_side_a {
            position: absolute;
            height: 20px;
            width: 10px;
            background: $frameColor1;
            
            &::before {
              content: '';
              position: absolute;
              width: 4px;
              height: 100%;
              background: $frameColor2;
              transform-origin: 0 0;
              transform: rotateY(-90deg);
            }
            &::after {
              content: '';
              position: absolute;
              right: 0;
              width: 4px;
              height: 100%;
              background: $frameColor2;
              transform-origin: 100% 0;
              transform: rotateY(90deg);
            }
          }
          .bike_body_frame_side_b {
            position: absolute;
            height: 20px;
            width: 10px;
            background: $frameColor1;
            transform: translateZ(4px);
            
            &::before {
              content: '';
              position: absolute;
              width: 10px;
              height: 4px;
              background: $frameColor2;
              transform-origin: 0 0;
              transform: rotateX(-90deg);
            }
            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              width: 10px;
              height: 4px;
              background: $frameColor2;
              transform-origin: 0 100%;
              transform: rotateX(90deg);
            }
          }
        }
      }
      &_saddle {
        position: absolute;
        transform: translateX(-80px) translateY(-50px);
        
        .bike_body_saddle_side_a {
          position: absolute;
          width: 40px;
          height: 20px;
          background: #000;
          transform: rotateX(90deg);
          
          &::before {
            content: '';
            position: absolute;
            top: 0;
            width: 40px;
            height: 6px;
            background: #333;
            transform-origin: 0 0;
            transform: rotateX(-90deg);
          }
          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            width: 40px;
            height: 6px;
            background: #333;
            transform-origin: 0 6px;
            transform: rotateX(90deg);
          }
        }
        .bike_body_saddle_side_b {
          position: absolute;
          width: 40px;
          height: 20px;
          background: #000;
          transform: rotateX(90deg) translateZ(-6px);
          
          &::before {
            content: '';
            position: absolute;
            left: 0;
            width: 6px;
            height: 20px;
            background: #666;
            transform-origin: 0 0;
            transform: rotateY(-90deg);
          }
          &::after {
            content: '';
            position: absolute;
            right: 0;
            width: 6px;
            height: 20px;
            background: #666;
            transform-origin: 6px 0;
            transform: rotateY(90deg);
          }
        }
      }
      &_rear {
        .arm_a {
          position: absolute;
          transform: rotateZ(28deg) translateZ(4px) translateX(-60px) translateY(4px);
          
          .bike_body_frame_side_a {
            position: absolute;
            height: 90px;
            width: 4px;
            background: $frameColor1;
            
            &::before {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              background: $frameColor2;
              transform-origin: 0 0;
              transform: rotateY(-90deg);
            }
            &::after {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              background: $frameColor2;
              transform-origin: 100% 0;
              transform: rotateY(90deg);
            }
          }
          .bike_body_frame_side_b {
            position: absolute;
            height: 90px;
            width: 4px;
            background: $frameColor1;
            transform: translateZ(4px);
            
            &::before {
              content: '';
              position: absolute;
              width: 4px;
              height: 4px;
              background: $frameColor2;
              transform-origin: 0 0;
              transform: rotateX(-90deg);
            }
            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              width: 4px;
              height: 4px;
              background: $frameColor2;
              transform-origin: 0 100%;
              transform: rotateX(90deg);
            }
          }
        }
        .arm_b {
          position: absolute;
          transform: rotateZ(28deg) translateZ(-8px) translateX(-60px) translateY(4px);
          
          .bike_body_frame_side_a {
            position: absolute;
            height: 90px;
            width: 4px;
            background: $frameColor1;
            
            &::before {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              background: $frameColor2;
              transform-origin: 0 0;
              transform: rotateY(-90deg);
            }
            &::after {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              background: $frameColor2;
              transform-origin: 100% 0;
              transform: rotateY(90deg);
            }
          }
          .bike_body_frame_side_b {
            position: absolute;
            height: 90px;
            width: 4px;
            background: $frameColor1;
            transform: translateZ(4px);
            
            &::before {
              content: '';
              position: absolute;
              width: 4px;
              height: 4px;
              background: $frameColor2;
              transform-origin: 0 0;
              transform: rotateX(-90deg);
            }
            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              width: 4px;
              height: 12px;
              background: $frameColor2;
              transform-origin: 0 100%;
              transform: rotateX(-90deg);
            }
          }
        }
        .arm_c {
          position: absolute;
          transform: rotateZ(90deg) translateZ(4px) translateX(53px) translateY(26px);
          
          .bike_body_frame_side_a {
            position: absolute;
            height: 70px;
            width: 4px;
            background: $frameColor1;
            
            &::before {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              background: $frameColor2;
              transform-origin: 0 0;
              transform: rotateY(-90deg);
            }
            &::after {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              background: $frameColor2;
              transform-origin: 100% 0;
              transform: rotateY(90deg);
            }
          }
          .bike_body_frame_side_b {
            position: absolute;
            height: 70px;
            width: 4px;
            background: $frameColor1;
            transform: translateZ(4px);
            
            &::before {
              content: '';
              position: absolute;
              width: 4px;
              height: 4px;
              background: $frameColor2;
              transform-origin: 0 0;
              transform: rotateX(-90deg);
            }
            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              width: 4px;
              height: 4px;
              background: $frameColor2;
              transform-origin: 0 100%;
              transform: rotateX(90deg);
            }
          }
        }
        .arm_d {
          position: absolute;
          transform: rotateZ(90deg) translateZ(-8px) translateX(53px) translateY(26px);
          
          .bike_body_frame_side_a {
            position: absolute;
            height: 70px;
            width: 4px;
            background: $frameColor1;
            
            &::before {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              background: $frameColor2;
              transform-origin: 0 0;
              transform: rotateY(-90deg);
            }
            &::after {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              background: $frameColor2;
              transform-origin: 100% 0;
              transform: rotateY(90deg);
            }
          }
          .bike_body_frame_side_b {
            position: absolute;
            height: 70px;
            width: 4px;
            background: $frameColor1;
            transform: translateZ(4px);
            
            &::before {
              content: '';
              position: absolute;
              width: 4px;
              height: 4px;
              background: $frameColor2;
              transform-origin: 0 0;
              transform: rotateX(-90deg);
            }
            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              width: 4px;
              height: 4px;
              background: $frameColor2;
              transform-origin: 0 100%;
              transform: rotateX(90deg);
            }
          }
        }
      }
      &_front {
        position: absolute;
        transform: rotateZ(-20deg) translateX(75px) translateY(-40px);
        
        .bike_body_frame_1 {
          position: absolute;
          height: 65px;
          width: 8px;
          background: $frameColor1;
        }
        .bike_body_frame_2 {
          position: absolute;
          width: 30px;
          height: 8px;
          background: $frameColor1;
        }
        .side_a {
          position: absolute;
          transform: translateZ(4px);
          
          .bike_body_frame_1 {
            &::before {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              background: $frameColor2;
              transform-origin: 0 0;
              transform: rotateY(90deg);
            }
            &::after {
              content: '';
              position: absolute;
              width: 8px;
              height: 8px;
              background: $frameColor2;
              transform-origin: 0 0;
              transform: rotateX(-90deg);
            }
          }
          .bike_body_frame_2 {
            &::before {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              background: $frameColor2;
              transform-origin: 0 0;
              transform: rotateX(-90deg);
            }
          }
        }
        .side_b {
          position: absolute;
          transform: translateZ(-4px);
          
          .bike_body_frame_1 {
            &::before {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              background: $frameColor2;
              transform-origin: 100% 0;
              transform: rotateY(90deg);
            }
            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              width: 8px;
              height: 8px;
              background: $frameColor2;
              transform-origin: 100% 100%;
              transform: rotateX(-90deg);
            }
          }
          .bike_body_frame_2 {
            &::before {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              background: $frameColor2;
              transform-origin: 100% 100%;
              transform: rotateX(-90deg);
            }
          }
        }
        .side_c {
          transform: rotateY(90deg) translateX(-40px) translateZ(30px);
          
          .bike_body_frame_side_a {
            position: absolute;
            width: 80px;
            height: 8px;
            background: $frameColor1;
            
            &::before {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              background: $frameColor2;
              transform-origin: 0 0;
              transform: rotateX(90deg);
            }
            &::after {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              background: $frameColor2;
              transform-origin: 100% 100%;
              transform: rotateX(-90deg);
            }
          }
          .bike_body_frame_side_b {
            position: absolute;
            width: 80px;
            height: 8px;
            background: $frameColor1;
            transform: translateZ(8px);
            
            &::before {
              content: '';
              position: absolute;
              width: 8px;
              height: 8px;
              background: $frameColor2;
              transform-origin: 0 0;
              transform: rotateY(90deg);
            }
            &::after {
              content: '';
              position: absolute;
              right: 0;
              width: 8px;
              height: 8px;
              background: $frameColor2;
              transform-origin: 100% 0;
              transform: rotateY(-90deg);
            }
          }
        }
        .arm_a {
          position: absolute;
          transform: translateZ(4px) translateX(2px) translateY(57px);
          
          .bike_body_frame_side_a {
            position: absolute;
            height: 70px;
            width: 4px;
            background: $frameColor1;
            
            &::before {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              background: $frameColor2;
              transform-origin: 0 0;
              transform: rotateY(-90deg);
            }
            &::after {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              background: $frameColor2;
              transform-origin: 100% 0;
              transform: rotateY(90deg);
            }
          }
          .bike_body_frame_side_b {
            position: absolute;
            height: 70px;
            width: 4px;
            background: $frameColor1;
            transform: translateZ(4px);
            
            &::before {
              content: '';
              position: absolute;
              width: 4px;
              height: 4px;
              background: $frameColor2;
              transform-origin: 0 0;
              transform: rotateX(-90deg);
            }
            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              width: 4px;
              height: 4px;
              background: $frameColor2;
              transform-origin: 0 100%;
              transform: rotateX(90deg);
            }
          }
        }
        .arm_b {
          position: absolute;
          transform: translateZ(-8px) translateX(2px) translateY(57px);
          
          .bike_body_frame_side_a {
            position: absolute;
            height: 70px;
            width: 4px;
            background: $frameColor1;
            
            &::before {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              background: $frameColor2;
              transform-origin: 0 0;
              transform: rotateY(-90deg);
            }
            &::after {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              background: $frameColor2;
              transform-origin: 100% 0;
              transform: rotateY(90deg);
            }
          }
          .bike_body_frame_side_b {
            position: absolute;
            height: 70px;
            width: 4px;
            background: $frameColor1;
            transform: translateZ(4px);
            
            &::before {
              content: '';
              position: absolute;
              width: 4px;
              height: 4px;
              background: $frameColor2;
              transform-origin: 0 0;
              transform: rotateX(-90deg);
            }
            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              width: 4px;
              height: 12px;
              background: $frameColor2;
              transform-origin: 0 100%;
              transform: rotateX(-90deg);
            }
          }
        }
      }
      &_triangle {
        position: absolute;
        transform: rotateZ(80deg) translateX(-35px) translateY(-75px);
        
        .bike_body_frame_1 {
          position: absolute;
          height: 130px;
          width: 8px;
          background: $frameColor1;
          transform-origin: 100% 0;
          transform: rotateZ(-36.5deg);
        }
        .bike_body_frame_2 {
          height: 120px;
          width: 8px;
          background: $frameColor1;
        }
        .bike_body_frame_3 {
          position: absolute;
          bottom: 0;
          height: 8px;
          width: 97px;
          background: $frameColor1;
          transform: rotateZ(-10deg) translateX(-10px);
        }
        .side_a {
          position: absolute;
          transform: translateZ(4px);

          .bike_body_frame_1 {
            &::before {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              background: $frameColor2;
              transform-origin: 0 0;
              transform: rotateY(90deg);
            }
            &::after {
              content: '';
              position: absolute;
              width: 8px;
              height: 8px;
              background: $frameColor2;
              transform-origin: 0 0;
              transform: rotateX(-90deg);
            }
          }
          .bike_body_frame_2 {
            &::before {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              background: $frameColor2;
              transform-origin: 0 0;
              transform: rotateY(90deg);
            }
            &::after {
              content: '';
              position: absolute;
              width: 8px;
              height: 8px;
              background: $frameColor2;
              transform-origin: 0 0;
              transform: rotateX(-90deg);
            }
          }
          .bike_body_frame_3 {
            &::before {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              background: $frameColor2;
              transform-origin: 0 0;
              transform: rotateX(-90deg);
            }
            &::after {
              content: '';
              position: absolute;
              width: 8px;
              height: 8px;
              background: $frameColor2;
              transform-origin: 0 0;
              transform: rotateY(90deg);
            }
          }
        }
        .side_b {
          position: absolute;
          transform: translateZ(-4px);

          .bike_body_frame_1 {
            &::before {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              background: $frameColor2;
              transform-origin: 100% 0;
              transform: rotateY(90deg);
            }
            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              width: 8px;
              height: 8px;
              background: $frameColor2;
              transform-origin: 0 100%;
              transform: rotateX(-90deg);
            }
          }
          .bike_body_frame_2 {
            &::before {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              background: $frameColor2;
              transform-origin: 100% 0;
              transform: rotateY(90deg);
            }
            &::after {
              content: '';
              position: absolute;
              width: 8px;
              height: 8px;
              background: $frameColor2;
              transform-origin: 0 100%;
              transform: rotateX(-90deg);
            }
          }
          .bike_body_frame_3 {
            &::before {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              background: $frameColor2;
              transform-origin: 0 100%;
              transform: rotateX(-90deg);
            }
            &::after {
              content: '';
              position: absolute;
              right: 0;
              width: 8px;
              height: 8px;
              background: $frameColor2;
              transform-origin: 100% 100%;
              transform: rotateY(90deg);
            }
          }
        }
      }
    }
    &_tire {
      &_frame {
        position: absolute;
        width: 10px;
        height: 60px;
        border-top: 10px solid #000;
        // border-right: 1px solid #000;
        // border-bottom: 1px solid #000;
        // border-left: 1px solid #000;
        border-radius: 0 0 99px 99px;
        transform-origin: 5px 55px;
        
        &:nth-child(2n) {
          border-right-color: transparent;
          border-bottom-color: transparent;
          border-left-color: transparent;
        }
        @for $i from 0 through 36 {
          &:nth-child(#{$i + 1}) {
            transform: rotateZ(#{$i * 10}deg);
          }
        }
      }
      .side_a {
        transform: translateZ(3px);
        
        .bike_tire_frame {
          &::before {
            content: '';
            position: absolute;
            top: -10px;
            width: 10px;
            height: 6px;
            background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(68,68,68,1) 30%,rgba(68,68,68,1) 70%,rgba(0,0,0,1) 100%);
            transform-origin: 50% 0%;
            transform: rotateX(-90deg);
          }
          &::after {
            content: '';
            position: absolute;
            top: -4px;
            width: 10px;
            height: 4px;
            background: linear-gradient(to bottom, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);
            transform: translateZ(0.1px);
          }
        }
      }
      .side_b {
        transform: translateZ(-3px);
        
        .bike_tire_frame {
          &::before {
            content: '';
            position: absolute;
            top: 0px;
            width: 10px;
            height: 6px;
            background: linear-gradient(to bottom, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);
            transform-origin: 50% 0%;
            transform: rotateX(90deg);
          }
          &::after {
            content: '';
            position: absolute;
            top: -4px;
            width: 10px;
            height: 4px;
            background: linear-gradient(to bottom, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);
            transform: translateZ(-0.1px);
          }
        }
      }
      .side_c {
        .bike_tire_frame {
          border-right: 1px solid gray;
          border-bottom: 1px solid gray;
          border-left: 1px solid silver;
          
          &:nth-child(even) {
            border: none;
          }
        }
      }
      &.front {
        transform: translateX(100px);
      }
      &.rear {
        transform: translateX(-100px);
      }
      .rotate_tire {
        transform-origin: 5px 55px;
        animation: tire $rotateSpeed linear infinite;
      }
    }
  }
}

@keyframes run {
  0% {
    transform: rotateX(-30deg) rotateY(0deg);
  }
  50% {
    transform: rotateX(10deg) rotateY(-180deg);
  }
  100% {
    transform: rotateX(-30deg) rotateY(-360deg);
  }
}
@keyframes tire {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
@keyframes pedalA {
  0% {
    transform: rotateZ(0deg) rotateX(90deg) translateY(4px);
  }
  100% {
    transform: rotateZ(-360deg) rotateX(90deg) translateY(4px);
  }
}
@keyframes pedalB {
  0% {
    transform: rotateZ(0deg) rotateX(-90deg) translateY(0px);
  }
  100% {
    transform: rotateZ(-360deg) rotateX(-90deg) translateY(0px);
  }
}

@keyframes wind {
  0% {
    transform: translateY(-300px);
  }
  100% {
    transform: translateY(200px);
  }
}
            
          
!
999px
Loading ..................

Console