Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                .cube
  .cube.front.face
  .cube.back.face
  .cube.right.face
  .cube.left.face
  .cube.top.face
  .cube.bottom.face
  .cube.bottom.hidden.face
  
  .cube-two
    .cube-two.front.face
    .cube-two.back.face
    .cube-two.right.face
    .cube-two.left.face
    .cube-two.top.face
    .cube-two.bottom.face
    
  .cube-three
    .cube-three.front.face
    .cube-three.back.face
    .cube-three.right.face
    .cube-three.left.face
    .cube-three.top.face
    .cube-three.bottom.face
    
  .loading-cube
    .loading-cube.front.face
    .loading-cube.back.face
    .loading-cube.left.face
    .loading-cube.right.face
    .loading-cube.top.face
    .loading-cube.bottom.face
  
  .loading-cube-two
    .loading-cube-two.front.face
    .loading-cube-two.back.face
    .loading-cube-two.left.face
    .loading-cube-two.right.face
    .loading-cube-two.top.face
    .loading-cube-two.bottom.face
  
  .loading-cube-three
    .loading-cube-three.front.face
    .loading-cube-three.back.face
    .loading-cube-three.left.face
    .loading-cube-three.right.face
    .loading-cube-three.top.face
    .loading-cube-three.bottom.face
    
  .loading-cube-four
    .loading-cube-four.front.face
    .loading-cube-four.back.face
    .loading-cube-four.left.face
    .loading-cube-four.right.face
    .loading-cube-four.top.face
    .loading-cube-four.bottom.face
    
  .driver-cube
    .driver-cube.front.face
    .driver-cube.back.face
    .driver-cube.left.face
    .driver-cube.right.face
    .driver-cube.bottom.face
    .driver-cube.top.face
    
  .test-cube
    .test-cube.front.face
    .test-cube.back.face
    .test-cube.left.face
    .test-cube.right.face
    .test-cube.bottom.face
    .test-cube.top.face
    
  .test-cube-two
    .test-cube-two.front.face
    .test-cube-two.back.face
    .test-cube-two.left.face
    .test-cube-two.right.face
    .test-cube-two.bottom.face
    .test-cube-two.top.face

  .test-cube-three
    .test-cube-three.front.face
    .test-cube-three.back.face
    .test-cube-three.left.face
    .test-cube-three.right.face
    .test-cube-three.bottom.face
    .test-cube-three.top.face
    
  .test-cube-four
    .test-cube-four.front.face
    .test-cube-four.back.face
    .test-cube-four.left.face
    .test-cube-four.right.face
    .test-cube-four.bottom.face
    .test-cube-four.top.face 
    
  .wheel-cube
    .wheel-cube.front.face
    .wheel-cube.back.face
    
    .wheel-cube.slices
      .slices.slice1.face
      .slices.slice2.face
      .slices.slice3.face
      .slices.slice4.face
      .slices.slice5.face
      .slices.slice6.face
      .slices.slice7.face
      .slices.slice8.face
      .slices.slice9.face
      .slices.slice10.face
      .slices.slice11.face
      .slices.slice12.face
      .slices.slice13.face
      .slices.slice14.face
      .slices.slice15.face
      .slices.slice16.face
      .slices.slice17.face
      .slices.slice18.face
      .slices.slice19.face
      .slices.slice20.face
      
  .wheel-cover
    .wheel-cover.front.face
    
  .wheel-cube-two
    .wheel-cube-two.front.face
    .wheel-cube-two.back.face
    
    .wheel-cube-two.slices
      .slices.slice1.face
      .slices.slice2.face
      .slices.slice3.face
      .slices.slice4.face
      .slices.slice5.face
      .slices.slice6.face
      .slices.slice7.face
      .slices.slice8.face
      .slices.slice9.face
      .slices.slice10.face
      .slices.slice11.face
      .slices.slice12.face
      .slices.slice13.face
      .slices.slice14.face
      .slices.slice15.face
      .slices.slice16.face
      .slices.slice17.face
      .slices.slice18.face
      .slices.slice19.face
      .slices.slice20.face
      
  .wheel-cover-two
    .wheel-cover-two.front.face
    
  .driver-cube-two
    .driver-cube-two.front.face
    
  .driver-cube-three
    .driver-cube-three.front.face
    
  .driver-cube-four
    .driver-cube-four.front.face
    
  .bumper-cube
    .bumper-cube.front.face
    .bumper-cube.right.face
    .bumper-cube.left.face
    .bumper-cube.back.face
    .bumper-cube.top.face
    .bumper-cube.bottom.face
    
  .bumper-cube-two
    .bumper-cube-two.front.face
    .bumper-cube-two.right.face
    .bumper-cube-two.left.face
    .bumper-cube-two.back.face
    .bumper-cube-two.top.face
    .bumper-cube-two.bottom.face
    
  .door-cube
    .door-cube.front.face
    
  .door-handle
    .door-handle.front.face
    
  .bumper-style
    .bumper-style.left.face
    
  .bumper-style-two
    .bumper-style-two.left.face
    
  .grill-style
    .grill-style.left.face
    
  .grill-style-two
    .grill-style-two.left.face
    
  .grill-style-three
    .grill-style-three.left.face
    
  .grill-style-four
    .grill-style-four.left.face
    
  .window-style
    .window-style.left.face
              
            
!

CSS

              
                *,
*::before,
*::after {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
  padding-bottom: 5.5rem;
  transform: scale3d(1, 1.1, 1);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
  background-color: #4394F5;
}
/* Cube mixing credit: @rolivaalonso */
@mixin cuboid($x, $y, $z) {
  &.front {
    @include cube-face($x, $y, $z);
  }
  &.back {
    @include cube-back($x, $y, $z);
  }
  &.right {
    @include cube-right($x, $y, $z);
  }
  &.left {
    @include cube-left($x, $y, $z);
  }
  &.bottom {
    @include cube-bottom($x, $y, $z);
  }
  &.top {
    @include cube-top($x, $y, $z);
  }
}

@mixin cube-face($x, $y, $z) {
  width: $x;
  height: $y;
  -webkit-transform-origin: bottom left;
      -ms-transform-origin: bottom left;
          transform-origin: bottom left;
  -webkit-transform: rotateX(-90deg) translateZ(-($y - ($z * 2)));
          transform: rotateX(-90deg) translateZ(-($y - ($z * 2)));
}

@mixin cube-back($x, $y, $z) {
  width: $x;
  height: $y;
  -webkit-transform-origin: top left;
      -ms-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateX(-90deg) rotateY(180deg) 
    translateX(-$x) translateY(-$y);
          transform: rotateX(-90deg) rotateY(180deg) 
    translateX(-$x) translateY(-$y);
}

@mixin cube-right($x, $y, $z) {
  width: $z * 2;
  height: $y;
  -webkit-transform-origin: top left;
      -ms-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ($x) translateX(-$z * 2) translateY(-$y);
          transform: rotateY(90deg) rotateZ(-90deg) translateZ($x) translateX(-$z * 2) translateY(-$y);
}

@mixin cube-left($x, $y, $z) {
  width: $z * 2;
  height: $y;
  -webkit-transform-origin: top left;
      -ms-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-$y);
          transform: rotateY(-90deg) rotateZ(90deg) translateY(-$y);
}

@mixin cube-top($x, $y, $z) {
  width: $x;
  height: $z * 2;
  -webkit-transform-origin: top left;
      -ms-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: translateZ($y);
          transform: translateZ($y);
}

@mixin cube-bottom($x, $y, $z) {
  width: $x;
  height: $z * 2;
  -webkit-transform-origin: top left;
      -ms-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateY(180deg) translateX(-$x);
          transform: rotateY(180deg) translateX(-$x);
}

$cube-h: 13.5vw;
$cube-w: 29vw;
$cube-z: 7.75vw;

.face {
  position: absolute;
}

.cube {
  @include cuboid($cube-w, $cube-h, $cube-z);
  width: $cube-w;
  height: $cube-h;
  -webkit-transform: perspective(1000000px) rotateX(70deg) rotateZ(-45deg);
          transform: perspective(1000000px) rotateX(70deg) rotateZ(-45deg);
  top: 80%;
  left: -50%;
  
  &.front, &.back,
  &.right, &.left,
  &.top, &.bottom {
    background-color: #f06;
    background-color: #13D1C6;
    background-color: #fff;
  }
  
  .bottom {
    &.hidden {
      background: blue;
      background: rgba(43, 103, 177, .99);
      transform: translateZ(-10vw) rotateZ(-2deg);
      left: -10.75vw;
      top: -2.5vw;
      width: 145%;
      height: 130%;
    }
  }
  
  &.left {
    background: rgba(250, 250, 250, .98);
    background: hsl(255, 20%, 90%);
    background: #DCE4F3;
    background: #CFDAF2;
    background: rgb(191, 202, 224);
    background: rgb(202, 212, 231);
    background: rgb(213, 223, 241);
  }
  
  &.top {
    background: rgba(255, 255, 255, 1);
    background: #F6F7F7;
    background: #FBFBFB;
  }
  
  &.front {
    background: transparent;
  }
  
  &.bottom, &.back {
    background: #1F618D;
    background: #174CB6;
    background: #3943BB;
    background: #1F349E;
    background: #3923AF;
  }
  
  &.right {
    background: rgb(24, 82, 121);
    background: rgb(47, 57, 170);
    background: rgb(46, 27, 151);
    background: rgb(37, 23, 119);
  }
  
  $cube-two-w: 4.5vw;
  $cube-two-h: 4vw;
  $cube-two-z: 2.5vw;

  .cube-two {
    @include cuboid($cube-two-w, $cube-two-h, $cube-two-z);
    width: $cube-w;
    height: $cube-h;
    -webkit-transform: translateZ(3.6vw) perspective(1000px) rotateY(2deg) rotateZ(-1.5deg);
            transform: translateZ(3.6vw) perspective(1000px) rotateY(2deg) rotateZ(-1.5deg);
    top: 110.75%;
    left: -5%;
    
    &.front, &.back,
    &.right, &.left,
    &.top, &.bottom {
      background: #48C9B0;
    }
    
    &.top {
      background: rgb(73, 216, 187);
      background: #4AE8BD;
      background: rgb(91, 247, 205);
    }
    
    &.front {
      background: rgb(64, 190, 165);
    }
    
    &.left {
      background: rgb(57, 170, 147);
    }
  }
  
  .cube-three {
    @include cuboid($cube-two-w, $cube-two-h, $cube-two-z);
    width: $cube-w;
    height: $cube-h;
    -webkit-transform: translateZ(4vw) perspective(1000px) rotateY(2deg) rotateZ(-1.5deg);
            transform: translateZ(4vw) perspective(1000px) rotateY(2deg) rotateZ(-1.5deg);
    top: 18%;
    left: 24%;
    
    &.front, &.back,
    &.right, &.left,
    &.top, &.bottom {
      background: #48C9B0;
    }
    
    &.top {
      background: rgb(73, 216, 187);
      background: #4AE8BD;
      background: rgb(91, 247, 205);
    }
    
    &.front {
      background: rgb(64, 190, 165);
    }
    
    &.left {
      background: rgb(57, 170, 147);
    }
  }
  
  $p-w: 4.75vw;
  $p-h: 4vw;
  $p-z: 2.5vw;
  
  /* package cubes */
  .loading-cube {
    @include cuboid($p-w, $p-h, $p-z);
    width: $p-w;
    height: $p-h;
    -webkit-transform: perspective(1000px) rotateY(0deg) rotateZ(-1.5deg);
            transform: perspective(1000px) rotateY(0deg) rotateZ(-1.5deg);
    top: -175%;
    left: 161%;

    &.front, &.back,
    &.right, &.left,
    &.top, &.bottom {
      background: #48C9B0;
      background-color: #36E4C2;
      background: #54E6D9;
      background: #51DED1;
    }
    
    &.top {
      background: rgb(73, 216, 187);
      background: #75EED3;
      background: #51E5BC;
      background: #4AE8BD;
      background: rgb(76, 233, 191);
      background: rgb(78, 236, 194);
      background: rgb(91, 247, 205);
    }
    
    &.front {
      background: rgb(64, 190, 165);
    }
    
    &.left {
      background: rgb(57, 170, 147);
    }
  }
 
  .loading-cube-two {
    @include cuboid($p-w, $p-h, $p-z);
    width: $p-w;
    height: $p-h;
    left: 156%;
    top: -400%;

    &.front, &.back,
    &.right, &.left,
    &.top, &.bottom {
      background: #48C9B0;
    }
    
    &.top {
      background: rgb(73, 216, 187);
      background: #4AE8BD;
      background: rgb(91, 247, 205);
    }
    
    &.front {
      background: rgb(64, 190, 165);
    }
    
    &.left {
      background: rgb(57, 170, 147);
    }
  }
  
  .loading-cube-three {
    @include cuboid($p-w, $p-h, $p-z);
    width: $p-w;
    height: $p-h;
    left: 60%;
    top: -501%;

    &.front, &.back,
    &.right, &.left,
    &.top, &.bottom {
      background: #48C9B0;
    }
    
    &.top {
      background: rgb(73, 216, 187);
      background: #4AE8BD;
      background: rgb(91, 247, 205);
    }
    
    &.front {
      background: rgb(64, 190, 165);
    }
    
    &.left {
      background: rgb(57, 170, 147);
    }
  }
  
  .loading-cube-four {
    @include cuboid($p-w, $p-h, $p-z);
    width: $p-w;
    height: $p-h;
    left: -65%;
    top: -598%;

    &.front, &.back,
    &.right, &.left,
    &.top, &.bottom {
      background: #48C9B0;
    }
    
    &.top {
      background: rgb(73, 216, 187);
      background: #4AE8BD;
      background: rgb(91, 247, 205);
    }
    
    &.front {
      background: rgb(64, 190, 165);
    }
    
    &.left {
      background: rgb(57, 170, 147);
    }
  }
  
  $d-cube-w: 7vw;
  $d-cube-h: 5vw;
  $d-cube-z: 7vw;
  
  .driver-cube {
    @include cuboid($d-cube-w, $d-cube-h, $d-cube-z);
    width: $cube-w;
    height: $cube-h;
    top: -219.5%;
    left: -23.75vw;

    &.front, &.back,
    &.right, &.left,
    &.top, &.bottom {
      background-color: #f06;
      background-color: #13D1C6;
      background-color: #f06;
      background: #fff;
    }
    
    &.front {
      background: #F0F4FD;
      background: rgb(228, 236, 247);
      background: #CFDAF2;
    }
    
    &.left {
      background: -webkit-gradient(linear, left bottom, left top, color-stop(10%, #0E2850), color-stop(20%, #CFDAF2));
      background: -o-linear-gradient(bottom, #0E2850 10% 20%, #CFDAF2 20%);
      background: linear-gradient(to top, #0E2850 10% 20%, #CFDAF2 20%);
    }
  }
  
  $t-cube-w: 2vw;
  $t-cube-h: 1.5vw;
  $t-cube-z: .4vw;
  
  .test-cube {
    @include cuboid($t-cube-w, $t-cube-h, $t-cube-z);
    width: $t-cube-w;
    height: $t-cube-h;
    top: -28.75vw;
    left: -25vw;
    -webkit-transform: translateZ(.2vw);
            transform: translateZ(.2vw);
    
    &.front, &.back,
    &.left, &.right,
    &.top, &.bottom {
      background-color: #f06;
      background-color: #13D1C6;
      background-color: #f06;
      background: #0E2850;
    }
  }
  
  $f-cube-w: 42vw;
  $f-cube-h: .5vw;
  $f-cube-z: 7.5vw;
  
  $window-cube-w: 7vw;
  $window-cube-h: 5.25vw;
  $window-cube-z: 7.05vw;
  
  .test-cube-three {
    @include cuboid($window-cube-w, $window-cube-h, $window-cube-z);
    -webkit-transform: translateZ(10vw);
            transform: translateZ(10vw);
    width: $f-cube-w;
    height: $f-cube-h;
    top: -34.9vw;
    left: -33.4vw;
    
    &.bottom {
      background-color: #f06;
      background-color: #13D1C6;
      background-color: #f06;
      background: rgba(100, 100, 100, .9);
      background: #416397;
      background: -webkit-gradient(linear, left top, right top, color-stop(10%, rgb(43, 103, 177)));
      background: -o-linear-gradient(left, rgb(43, 103, 177) 10% 80% rgb(43, 103, 177) 80%);
      background: linear-gradient(to right, rgb(43, 103, 177) 10% 80% rgb(43, 103, 177) 80%);
    }
    
    &.front, &.back,
    &.right, &.left,
    &.top, &.bottom {
      background-color: #f06;
      background-color: #13D1C6;
      background-color: #fff;
    }
    
    &.left {
      background: transparent;
    }
    
    &.bottom, &.right {
      background: rgba(43, 51, 124, .9);
    }
    
    &.back {
      background: -o-linear-gradient(25deg, rgba(43, 51, 124, .825) 10% 75%, transparent 75%);
      background: linear-gradient(65deg, rgba(43, 51, 124, .825) 10% 75%, transparent 75%);
    }
    
    &.front {
      background: -o-linear-gradient(156deg, #F4F6F7 10% 75%, transparent 75%);
      background: linear-gradient(-66deg, #F4F6F7 10% 75%, transparent 75%);
      background: -o-linear-gradient(156deg, rgba(0, 0, 0, .8) 10% 75%, transparent 75%);
      background: linear-gradient(-66deg, rgba(0, 0, 0, .8) 10% 75%, transparent 75%);
      background: -o-linear-gradient(156deg, rgb(228, 236, 247) 10% 75%, transparent 75%);
      background: linear-gradient(-66deg, rgb(228, 236, 247) 10% 75%, transparent 75%);
      background: -o-linear-gradient(156deg, #CFDAF2 10% 75%, transparent 75%);
      background: linear-gradient(-66deg, #CFDAF2 10% 75%, transparent 75%);
    }
    
    &.top {
      background: -webkit-gradient(linear, left top, right top, color-stop(10%, transparent), color-stop(35%, #FBFBFB));
      background: -o-linear-gradient(left, transparent 10% 35%, #FBFBFB 35%);
      background: linear-gradient(to right, transparent 10% 35%, #FBFBFB 35%);
    }
    
    &.bottom {
      background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, rgba(43, 51, 124, .9)), color-stop(99%, transparent));
      background: -o-linear-gradient(top, rgba(43, 51, 124, .9) 10% 99%, transparent 99%);
      background: linear-gradient(to bottom, rgba(43, 51, 124, .9) 10% 99%, transparent 99%);
    }
  }
  
  $wf-cube-w: 7vw;
  $wf-cube-h: 5.75vw;
  $wf-cube-z: 7.06vw;
  
  .test-cube-four {
    @include cuboid($wf-cube-w, $wf-cube-h, $wf-cube-z / 1);
    -webkit-transform: translateZ(-15.35vw) rotateY(25deg);
            transform: translateZ(-15.35vw) rotateY(25deg);
    width: $f-cube-w;
    height: $f-cube-h;
    top: -35.3vw;
    left: -39.25vw;
    
    &.left {
      background-color: #f06;
      background-color: #13D1C6;
      background-color: #fff;
      background: rgba(3, 70, 150, .9);
      background: -webkit-gradient(linear, left bottom, left top, color-stop(10%, rgba(3, 70, 150, .8)), color-stop(78%, rgb(43, 51, 124)));
      background: -o-linear-gradient(bottom, rgba(3, 70, 150, .8) 10% 78%, rgb(43, 51, 124) 78%);
      background: linear-gradient(to top, rgba(3, 70, 150, .8) 10% 78%, rgb(43, 51, 124) 78%);
      background: -webkit-gradient(linear, left bottom, left top, color-stop(10%, rgba(46, 68, 173, 0.6)), color-stop(78%, rgb(43, 51, 124)));
      background: -o-linear-gradient(bottom, rgba(46, 68, 173, 0.6) 10% 78%, rgb(43, 51, 124) 78%);
      background: linear-gradient(to top, rgba(46, 68, 173, 0.6) 10% 78%, rgb(43, 51, 124) 78%);
    }
  }
  
  $w-cube-w: 2vw;
  $w-cube-h: 2vw;
  $w-cube-z: .5vw;
  
  $el-w: .7vw;
  $el-h: 3.75vw;
  $el-d: 1vw;
  
  $tw: 4vw;
  $th: 4vw;
  $td: 1vw;
  
  .wheel-cube {
    @include cuboid($tw, $th, $td);
    border-radius: 50%;
    left: 3.15vw;
    top: -28.5vw;
    -webkit-transform: translateZ(-.7vw);
            transform: translateZ(-1vw);
   
    .slices {
      width: $el-w;
      height: $el-h;
      -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-transform: translateZ(-2.6vw);
              transform: translateZ(-2.6vw);
      left: 9vw;
      top: -40.5vw;
      
      &.slice1, &.slice2, &.slice3,
      &.slice4, &.slice5, &.slice6,
      &.slice7, &.slice8, &.slice9,
      &.slice10, &.slice11, &.slice12,
      &.slice13, &.slice14, &.slice15,
      &.slice16, &.slice17, &.slice18,
      &.slice19, &.slice20 {
        background: rgb(43, 51, 124);
        border: 1vw solid rgb(43, 51, 124);
        border-width: 1vw 0;
      }

      &.slice1 {
        -webkit-transform: rotateY(0deg) translateZ(2vw);
                transform: rotateY(0deg) translateZ(2vw);
      }
      &.slice2 {
        -webkit-transform: rotateY(18deg) translateZ(2vw);
                transform: rotateY(18deg) translateZ(2vw);
      }
      &.slice3 {
        -webkit-transform: rotateY(36deg) translateZ(2vw);
                transform: rotateY(36deg) translateZ(2vw);
      }
      &.slice4 {
        -webkit-transform: rotateY(54deg) translateZ(2vw);
                transform: rotateY(54deg) translateZ(2vw);
      }
      &.slice5 {
        -webkit-transform: rotateY(72deg) translateZ(2vw);
                transform: rotateY(72deg) translateZ(2vw);
      }
      &.slice6 {
        -webkit-transform: rotateY(90deg) translateZ(2vw);
                transform: rotateY(90deg) translateZ(2vw);
      }
      &.slice7 {
        -webkit-transform: rotateY(108deg) translateZ(2vw);
                transform: rotateY(108deg) translateZ(2vw);
      }
      &.slice8 {
        -webkit-transform: rotateY(126deg) translateZ(2vw);
                transform: rotateY(126deg) translateZ(2vw);
      }
      &.slice9 {
        -webkit-transform: rotateY(144deg) translateZ(2vw);
                transform: rotateY(144deg) translateZ(2vw);
      }
      &.slice10 {
        -webkit-transform: rotateY(162deg) translateZ(2vw);
                transform: rotateY(162deg) translateZ(2vw);
      }
      &.slice11 {
        -webkit-transform: rotateY(180deg) translateZ(2vw);
                transform: rotateY(180deg) translateZ(2vw);
      }
      &.slice12 {
        -webkit-transform: rotateY(198deg) translateZ(2vw);
                transform: rotateY(198deg) translateZ(2vw);
      }
      &.slice13 {
        -webkit-transform: rotateY(216deg) translateZ(2vw);
                transform: rotateY(216deg) translateZ(2vw);
      }
      &.slice14 {
        -webkit-transform: rotateY(234deg) translateZ(2vw);
                transform: rotateY(234deg) translateZ(2vw);
      }
      &.slice15 {
        -webkit-transform: rotateY(252deg) translateZ(2vw);
                transform: rotateY(252deg) translateZ(2vw);
      }
      &.slice16 {
        -webkit-transform: rotateY(270deg) translateZ(2vw);
                transform: rotateY(270deg) translateZ(2vw);
      }
      &.slice17 {
        -webkit-transform: rotateY(288deg) translateZ(2vw);
                transform: rotateY(288deg) translateZ(2vw);
      }
      &.slice18 {
        -webkit-transform: rotateY(306deg) translateZ(2vw);
                transform: rotateY(306deg) translateZ(2vw);
      }
      &.slice19 {
        -webkit-transform: rotateY(324deg) translateZ(2vw);
                transform: rotateY(324deg) translateZ(2vw);
      }
      &.slice20 {
        -webkit-transform: rotateY(342deg) translateZ(2vw);
                transform: rotateY(342deg) translateZ(2vw);
      }
    }
  }
  
  $wc: 1.75vw;
  $wh: 1.75vw;
  $wd: 1vw;
  
  .wheel-cover {
    @include cuboid($wc, $wh, $wd);
    border-radius: 50%;
    top: -34.25vw;
    left: .35vw;
    -webkit-transform: translateZ(.135vw);
            transform: translateZ(-.4vw);
    
    &.front {
      background: #bbb;
      background: #AEB6BF;
    }
  }
  
  .wheel-cube-two {
    @include cuboid($tw, $th, $td);
    border-radius: 50%;
    -webkit-transform: translateZ(-.7vw);
            transform: translateZ(-.7vw);
    
    .slices {
      width: $el-w;
      height: $el-h;
      -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-transform: translateZ(-2.8vw);
              transform: translateZ(-2.8vw);
      left: -16vw;
      top: -43vw;
      
      &.slice1, &.slice2, &.slice3,
      &.slice4, &.slice5, &.slice6,
      &.slice7, &.slice8, &.slice9,
      &.slice10, &.slice11, &.slice12,
      &.slice13, &.slice14, &.slice15,
      &.slice16, &.slice17, &.slice18,
      &.slice19, &.slice20 {
        background: rgb(43, 51, 124);
        border: 1vw solid rgb(43, 51, 124);
        border-width: 1vw 0;
      }

      &.slice1 {
        -webkit-transform: rotateY(0deg) translateZ(2vw);
                transform: rotateY(0deg) translateZ(2vw);
      }
      &.slice2 {
        -webkit-transform: rotateY(18deg) translateZ(2vw);
                transform: rotateY(18deg) translateZ(2vw);
      }
      &.slice3 {
        -webkit-transform: rotateY(36deg) translateZ(2vw);
                transform: rotateY(36deg) translateZ(2vw);
      }
      &.slice4 {
        -webkit-transform: rotateY(54deg) translateZ(2vw);
                transform: rotateY(54deg) translateZ(2vw);
      }
      &.slice5 {
        -webkit-transform: rotateY(72deg) translateZ(2vw);
                transform: rotateY(72deg) translateZ(2vw);
      }
      &.slice6 {
        -webkit-transform: rotateY(90deg) translateZ(2vw);
                transform: rotateY(90deg) translateZ(2vw);
      }
      &.slice7 {
        -webkit-transform: rotateY(108deg) translateZ(2vw);
                transform: rotateY(108deg) translateZ(2vw);
      }
      &.slice8 {
        -webkit-transform: rotateY(126deg) translateZ(2vw);
                transform: rotateY(126deg) translateZ(2vw);
      }
      &.slice9 {
        -webkit-transform: rotateY(144deg) translateZ(2vw);
                transform: rotateY(144deg) translateZ(2vw);
      }
      &.slice10 {
        -webkit-transform: rotateY(162deg) translateZ(2vw);
                transform: rotateY(162deg) translateZ(2vw);
      }
      &.slice11 {
        -webkit-transform: rotateY(180deg) translateZ(2vw);
                transform: rotateY(180deg) translateZ(2vw);
      }
      &.slice12 {
        -webkit-transform: rotateY(198deg) translateZ(2vw);
                transform: rotateY(198deg) translateZ(2vw);
      }
      &.slice13 {
        -webkit-transform: rotateY(216deg) translateZ(2vw);
                transform: rotateY(216deg) translateZ(2vw);
      }
      &.slice14 {
        -webkit-transform: rotateY(234deg) translateZ(2vw);
                transform: rotateY(234deg) translateZ(2vw);
      }
      &.slice15 {
        -webkit-transform: rotateY(252deg) translateZ(2vw);
                transform: rotateY(252deg) translateZ(2vw);
      }
      &.slice16 {
        -webkit-transform: rotateY(270deg) translateZ(2vw);
                transform: rotateY(270deg) translateZ(2vw);
      }
      &.slice17 {
        -webkit-transform: rotateY(288deg) translateZ(2vw);
                transform: rotateY(288deg) translateZ(2vw);
      }
      &.slice18 {
        -webkit-transform: rotateY(306deg) translateZ(2vw);
                transform: rotateY(306deg) translateZ(2vw);
      }
      &.slice19 {
        -webkit-transform: rotateY(324deg) translateZ(2vw);
                transform: rotateY(324deg) translateZ(2vw);
      }
      &.slice20 {
        -webkit-transform: rotateY(342deg) translateZ(2vw);
                transform: rotateY(342deg) translateZ(2vw);
      }
    }
  }
  
  $wc: 1.75vw;
  $wh: 1.75vw;
  $wd: 1vw;
  
  .wheel-cover-two {
    @include cuboid($wc, $wh, $wd);
    border-radius: 50%;
    top: -36.5vw;
    left: -25.2vw;
    -webkit-transform: translateZ(-.125vw);
            transform: translateZ(-.125vw);
    
    &.front {
      background: #bbb;
      background: #AEB6BF;
    }
  }
  
  $dw-w: 4vw;
  $dw-h: 3.3vw;
  
  .driver-cube-two {
    @include cuboid($dw-w, $dw-h, $d-cube-z);
    width: $cube-w;
    height: $cube-h;
    top: -43.2vw;
    left: -31.5vw;
    -webkit-transform: translateZ(10.75vw);
            transform: translateZ(10.75vw);

    &.front {
      background-color: #f06;
      background-color: #13D1C6;
      background-color: #f06;
      background: #fff;
      background: rgba(43, 51, 124, .95);
    }
  }
  
  $d2w-w: 1.75vw;
  $d2w-h: 3.3vw;
  
  .driver-cube-three {
    @include cuboid($d2w-w, $d2w-h, $d-cube-z);
    width: $cube-w;
    height: $cube-h;
    top: -43.8vw;
    left: -46.1vw;
    -webkit-transform: translateZ(17.4vw);
            transform: translateZ(17.4vw);

    &.front {
      background-color: #f06;
      background-color: #13D1C6;
      background-color: #f06;
      background: #fff;
      background: rgb(43, 51, 124);
      background: -o-linear-gradient(160deg, rgb(73, 82, 168) 10% 45%, transparent 45%);
      background: linear-gradient(290deg, rgb(73, 82, 168) 10% 45%, transparent 45%);
    }
  }
  
  $bm-w: 1vw;
  $bm-h: 1.5vw;
  $bm-z: 7vw;
  
  .bumper-cube {
    @include cuboid($bm-w, $bm-h, $bm-z * 1.03);
    width: $cube-w;
    height: $cube-h;
    top: -43.85vw;
    left: -61.5vw;
    -webkit-transform: translateZ(18.5vw);
            transform: translateZ(18.5vw);

    &.front, &.back,
    &.right, &.left,
    &.top, &.bottom{
      background-color: #f06;
      background-color: #13D1C6;
      background-color: #f06;
      background: #fff;
      background: rgb(43, 51, 124);
      background: #0E2850;
    }
  }
  
  $zah: .275vw;
  $arghh: 1.35vw;
  $argh: 1.75vw;
  
  .bumper-cube-two {
    @include cuboid($argh, $arghh, $zah);
    width: $t-cube-w;
    height: $t-cube-h;
    top: -94.30vw;
    left: -25.12vw;
    -webkit-transform: translateZ(-.19vw);
            transform: translateZ(-.3vw);
    
    &.front, &.back,
    &.left, &.right,
    &.top, &.bottom {
      background-color: #f06;
      background-color: #13D1C6;
      background-color: #f06;
      background: #0E2850;
    }
  }
  
  .door-cube {
    @include cuboid($dw-w * 1.38, $dw-h * 1, $d-cube-z);
    width: $cube-w;
    height: $cube-h;
    top: -70.1vw;
    left: -48vw;
    -webkit-transform: translateZ(15.25vw);
            transform: translateZ(15.25vw);

    &.front {
      background-color: #f06;
      background-color: #13D1C6;
      background-color: #f06;
      background: #fff;
      background: rgba(43, 51, 124, .95);
      background: inherit;
      border: .05rem solid #888;
      border-top: none;
      border-radius: .15rem;
    }
  }
  
  $handle-w: 1vw;
  $handle-h: .4vw;
  $handle-z: 2vw;
  
  .door-handle {
    @include cuboid($handle-w, $handle-h, $handle-z);
    width: $cube-w;
    height: $cube-h;
    top: -71.1vw;
    left: -46.5vw;
    -webkit-transform: translateZ(19vw);
            transform: translateZ(19vw);

    &.front {
      background-color: #f06;
      background-color: #13D1C6;
      background-color: #f06;
      background: #fff;
      background: rgba(43, 51, 124, .95);
      background: inherit;
      border-top: none;
      border-radius: 40%;
      background: red;
      background: #0E2850;
    }
  }
  
  .bumper-style {
     @include cuboid($handle-w, $handle-h * 1.25, $handle-z / 7);
    width: $cube-w;
    height: $cube-h;
    top: -84vw;
    left: -62.5vw;
    -webkit-transform: translateZ(19.4vw);
            transform: translateZ(19.4vw);
    
    &.left {
      background: #AAA;
      border-radius: 50%;
    }
  }
  
  .bumper-style-two {
    @include cuboid($handle-w, $handle-h * 1.25, $handle-z / 7);
    width: $cube-w;
    height: $cube-h;
    top: -86.5vw;
    left: -62.5vw;
    -webkit-transform: translateZ(19.4vw);
            transform: translateZ(19.4vw);
    
    &.left {
      background: #AAA;
      border-radius: 50%;
    }
  }
  
  .grill-style {
    @include cuboid($d2w-w, $d2w-h / 2.75, $d-cube-z / 1.1);
    width: $cube-w;
    height: $cube-h;
    top: -142.2vw;
    left: -30.2vw;
    -webkit-transform: translateZ(6.5vw);
            transform: translateZ(6.5vw);
    
    &.left {
      background: red;
      background: #BBB;
      background: #CFCBCB;
      background: #DBE2EC;
      background: #C1C7D2;
      background: #A7B1C4;
      background: #AFBACE;
    }
  }
    .grill-style-two {
    @include cuboid($d2w-w, $d2w-h / 2.5, $d-cube-z / 2.25);
    width: $cube-w;
    height: $cube-h;
    top: -152.75vw;
    left: -30.2vw;
    -webkit-transform: translateZ(4.7vw);
            transform: translateZ(4.7vw);
    
    &.left {
      background: red;
      background: rgb(43, 51, 124);
    }
  }
  
    .grill-style-three {
    @include cuboid($d2w-w, $d2w-h / 2.5, $d-cube-z / 6);
    width: $cube-w;
    height: $cube-h;
    top: -169.15vw;
    left: -30.2vw;
    -webkit-transform: translateZ(4.7vw);
            transform: translateZ(4.7vw);
    
    &.left {
      background: red;
      background: #fff;
    }
  }
  
  .grill-style-four {
    @include cuboid($d2w-w, $d2w-h / 2.5, $d-cube-z / 5.5);
    width: $cube-w;
    height: $cube-h;
    top: -172.8vw;
    left: -30.2vw;
    -webkit-transform: translateZ(4.7vw);
            transform: translateZ(4.7vw);
    
    &.left {
      background: red;
      background: #fff;
    }
  }
  
  .window-style {
    @include cuboid($wf-cube-w, $wf-cube-h * 1.1, $wf-cube-z);
    -webkit-transform: translateZ(-8vw) rotateY(25deg);
            transform: translateZ(-8vw) rotateY(25deg);
    width: $f-cube-w;
    height: $f-cube-h;
    top: -33.85vw;
    left: -217.25vw;
    
    &.left {
      background: -o-linear-gradient(210deg, transparent 10% 40%, rgba(255, 255, 255, .06) 40% 52%, transparent 52%);
      background: linear-gradient(-120deg, transparent 10% 40%, rgba(255, 255, 255, .06) 40% 52%, transparent 52%);
    }
  }
}
              
            
!

JS

              
                /* 
  Design by Ihor Hedz on dribbble - https://dribbble.com/shots/10321039-RPD-Store-Main-Illustration
  
  Cube mixin credit: @rolivaalonso
  
*/
              
            
!
999px

Console