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 CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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.

            
              mixin edge()
  .edge
    .cube
      .side.front
      .side.bottom
      .side.right
      .inner.left
      .inner.top
      .inner.back
      .inner.left_
      .inner.top_
      .inner.back_
      .end.left
      .end.top
      .end.back
      if block
        .extend
          block
 
.pane 
  .illusion
    // bfr
    +edge 
    // tfr
    +edge 
    // bfl
    +edge 
    // bbr
    +edge 
    // bbl
    +edge 
    // tbl
    +edge 
    // tbr
    +edge
      .tbr-inner.left
      .tbr-inner.top
      .tbr-inner.left_
      .tbr-inner.top_
      .tbr-inner._left
      .tbr-inner._top
            
          
!
            
              // play with the size and offset
$size: 40;
$offset: 15;
// change the color
$color: tomato;
$bg: #BADA55;
// change the shading
$darken1: 20%;
$darken2: 40%;
///
///
////////////////////////



// dont't edit beyond this point
// cube size must be dividable by 3
$size: $size*3px; 
// cube size must be at least by 6
$offset: if($offset < 6, 6, $offset);

@mixin breathe($name){
  animation: $name 12s linear infinite;
  @keyframes #{$name} {
    @content;
  }
}



///
///
////////////////////////
* {
  transition: all 1s;
}
body {
  margin: 0;
  background: $bg;
  overflow: hidden;
}
body * {
  box-sizing: border-box;
  transform-style: preserve-3d;
}

.pane, .illusion {

  position: absolute;
  top: 50%;
  left: 50%;
}
.pane {
  height: $size*4;
  width: $size*4;
  margin: $size*-2;
}
.illusion {
  height: $size*2;
  width: $size*2;
  margin: $size/-1.66;
  transform: 
    rotate(-30deg)
    rotateY(35.25deg)
    rotateX(-45deg);  
}

.edge {
  position: absolute;
  height: $size;
  width: $size;
  
  &:nth-child(1) {
    z-index: 3;
    bottom: 0;
    right: 0;
    transform: 
      translateX($size/$offset)
      translateY($size/$offset);
    
    @include breathe(child1){
      0%, 20%, 80%, 100% {
       $offset: 6;
       transform: 
          translateX($size/$offset)
          translateY($size/$offset);
      }
      40%, 60% {
        $offset: 1000;
        transform: 
          translateX($size/$offset)
          translateY($size/$offset);
      }
    }
  }
  &:nth-child(2) {
    z-index: 3;
    top: 0;
    right: 0;
    transform: 
      translateX($size/$offset)
      translateY($size/$offset*-1)
      rotate(-90deg);
    @include breathe(child2){
      0%, 20%, 80%, 100% {
        $offset: 6;
        transform: 
          translateX($size/$offset)
          translateY($size/$offset*-1)
          rotate(-90deg);
      }
      40%, 60% {
        $offset: 1000;
        transform: 
          translateX($size/$offset)
          translateY($size/$offset*-1)
          rotate(-90deg);
      }
    }
    
    .cube {
      .side {
        &.right {
          border-color: mix(black,$color,$darken1);
        }
      }
      .end {
        &.top {
          border: $size/10 solid mix(black,$color,$darken2);
          border-width: 0 $size/($offset/2) $size/($offset/2) 0; 
          background: none;
          
          @include breathe(child2_2){
            0%, 20%, 80%, 100% {
              $offset: 6;
              border-width: 0 $size/($offset/2) $size/($offset/2) 0; 
            }
            40%, 60% {
              $offset: 1000;
              border-width: 0 $size/($offset/2) $size/($offset/2) 0; 
            }
          }
        }
      }
      .inner {
        &.top,
        &.top_ {
          background: mix(black,$color,$darken2);
        }
        &.back_,
        &.left {
          display: none;
        }
      }
    }
  }
  &:nth-child(3) {
    z-index: 3;
    bottom: 0;
    left: 0;
    transform: 
      translateX($size/$offset*-1)
      translateY($size/$offset)
      rotate(90deg);
    @include breathe(child3){
      0%, 20%, 80%, 100% {
        $offset: 6;
        transform: 
          translateX($size/$offset*-1)
          translateY($size/$offset)
          rotate(90deg);
      }
      40%, 60% {
        $offset: 1000;
        transform: 
          translateX($size/$offset*-1)
          translateY($size/$offset)
          rotate(90deg);
      }
    }    
    .cube {
      .side {
        &.bottom {
          border-color: mix(black,$color,$darken2);
        }
      }
      .end {
        &.left {
          border: $size/10 solid mix(black,$color,$darken1);
          border-width: 0 $size/($offset/2) $size/($offset/2) 0; 
          background: none;
          @include breathe(child3_2){
            0%, 20%, 80%, 100% {
              $offset: 6;
              border-width: 0 $size/($offset/2) $size/($offset/2) 0; 

            }
            40%, 60% {
              $offset: 1000;
              border-width: 0 $size/($offset/2) $size/($offset/2) 0; 

            }
          }
        }
      }
      .inner {
        &.top,
        &.back {
          display: none;
        }
        &.left,
        &.left_ {
          background: mix(black,$color,$darken1);
        }
      }
    }
  }
  &:nth-child(4) {
    z-index: 2;
    top: 0;
    right: 0;
    transform: 
      translateZ($size/$offset*-2)
      translateZ($size/-1)
      translateX($size/$offset)
      translateY($size/$offset*-1)
      rotateX(-180deg);
    @include breathe(child4){
      0%, 20%, 80%, 100% {
        $offset: 6;
        transform: 
          translateZ($size/$offset*-2)
          translateZ($size/-1)
          translateX($size/$offset)
          translateY($size/$offset*-1)
          rotateX(-180deg); 

      }
      40%, 60% {
        $offset: 1000;
        transform: 
          translateZ($size/$offset*-2)
          translateZ($size/-1)
          translateX($size/$offset)
          translateY($size/$offset*-1)
          rotateX(-180deg); 

      }
    }
    .cube {
      .side {
        &.bottom {
          border-color: mix(black,$color,$darken1);
        }
      }
      .end {
        &.left {
          background: mix(black,$color,$darken2);
        }
      }
      .inner {
        &.left,
        &.left_ {
          background: mix(black,$color,$darken2);
        }
      }
    }
  }
 
  &:nth-child(5) {
    z-index: 2;
    bottom: 0;
    left: 0;
    transform: 
      translateX($size/$offset*-1)
      translateZ($size/$offset*-2)
      translateZ($size/-1)
      translateY($size/$offset)
      rotateY(-180deg);
    @include breathe(child5){
            0%, 20%, 80%, 100% {
              $offset: 6;
              transform: 
      translateX($size/$offset*-1)
      translateZ($size/$offset*-2)
      translateZ($size/-1)
      translateY($size/$offset)
      rotateY(-180deg); 

            }
            40%, 60% {
              $offset: 1000;
              transform: 
      translateX($size/$offset*-1)
      translateZ($size/$offset*-2)
      translateZ($size/-1)
      translateY($size/$offset)
      rotateY(-180deg); 

            }
          }
    .cube {
      .side {
        &.right {
          border-color: mix(black,$color,$darken2);
        }
      }
    }
  }
  
  &:nth-child(6) {
    z-index: 2;
    top: 0;
    left: 0;
    transform: 
      translateX($size/$offset*-1)
      translateZ($size/$offset*-2)
      translateZ($size/-1)
      translateY($size/-$offset)
      rotateY(-180deg)
      rotate(-90deg);
    @include breathe(child6){
            0%, 20%, 80%, 100% {
              $offset: 6;
transform: 
      translateX($size/$offset*-1)
      translateZ($size/$offset*-2)
      translateZ($size/-1)
      translateY($size/-$offset)
      rotateY(-180deg)
      rotate(-90deg);
            }
            40%, 60% {
              $offset: 1000;
transform: 
      translateX($size/$offset*-1)
      translateZ($size/$offset*-2)
      translateZ($size/-1)
      translateY($size/-$offset)
      rotateY(-180deg)
      rotate(-90deg);
            }
          }
    .cube {
      .side {
        &.right {
          border-color: mix(black,$color,$darken1);
        }
        &.bottom {
          border-color: mix(black,$color,$darken2);
        }
      }
      .inner {
        &.left_,
        &.top_ {
          display: none;
        }
      }
      .end {
        &.back {
          border: $size/10 solid $color;
          border-width: 0 $size/($offset/2) $size/($offset/2) 0; 
          @include breathe(child6_2){
            0%, 20%, 80%, 100% {
              $offset: 6;
          border-width: 0 $size/($offset/2) $size/($offset/2) 0; 

            }
            40%, 60% {
              $offset: 1000;
          border-width: 0 $size/($offset/2) $size/($offset/2) 0; 

            }
          }
          background: none;
        }
      }
    }
  }
  
  &:nth-child(7) {
    bottom: 0;
    right: 0;
    transform: 
      translateX($size/$offset)
      translateZ($size/$offset*-2)
      translateZ($size/-1)
      translateY($size/$offset)
      rotateY(90deg);
     @include breathe(child7){
            0%, 20%, 80%, 100% {
              $offset: 6;
transform: 
      translateX($size/$offset)
      translateZ($size/$offset*-2)
      translateZ($size/-1)
      translateY($size/$offset)
      rotateY(90deg);
            }
            40%, 60% {
              $offset: 1000;
transform: 
      translateX($size/$offset)
      translateZ($size/$offset*-2)
      translateZ($size/-1)
      translateY($size/$offset)
      rotateY(90deg);
            }
          }
    .cube {
      .inner {
        &.left,
        &.left_ {
          background: $color;
        }
        &.back,
        &.back_ {
          background: mix(black,$color,$darken2);
        }
      }
      .end {
        &.back {
          background: mix(black,$color,$darken2);          
        }
        &.left {
          background: $color;          
        }
      }
    }
  }
  
  .cube {
    position: absolute;
    top: 0; left: 0;
    height: $size;
    width: $size;
    //box-shadow: 0 0 0 2px #000 inset;
    
    .side {
      position: absolute;
      top: 0; left: 0;
      height: $size;
      width: $size;
      
      &.front {
        border: $size/3 solid $color;
        border-width: 0  $size/3  $size/3 0;
        transform: translateZ($size/2);
      }
      &.right {
        border: $size/3 solid $color;
        border-width: 0 0 $size/3  $size/3;
        transform:
          rotateY(90deg)
          translateZ($size/2);
      }
      &.bottom {
        border: $size/3 solid $color;
        border-width: $size/3  $size/3 0 0;
        transform:
          rotateX(-90deg)
          translateZ($size/2);
      }
    }
    .end {
      position: absolute;
      top: 0; left: 0;
      height: $size/3;
      width: $size/3;
      
      &.left {
        top: auto;
        bottom: 0;
        background: mix(black,$color,$darken2);
        transform-origin: 0 50%;
        transform:
          translateZ($size/6)
          rotateY(-90deg);
      }
      &.top {
        left: auto;
        right: 0;
        background: mix(black,$color,$darken1);
        transform-origin: 0 0%;
        transform:
          translateZ($size/6)
          rotateX(90deg);
      }
      &.back {
        top: auto;
        bottom: 0;
        left: auto;
        right: 0;
        background: $color;
        transform-origin: 0 0%;
        transform:
          translateZ($size/-2);
      }
    }
    .inner {
      position: absolute;
      top: 0; left: 0;
      height: $size/3*2;
      width: $size/3;
      
      &.left {
        background: mix(black,$color,$darken2);
        transform-origin: 0 50%;
        transform:
          translateX($size/3*2)
          translateZ($size/6)
          rotateY(-90deg);
      }
      &.left_ {
        background: mix(black,$color,$darken2);
        transform-origin: 0 50%;
        transform:
          translateY($size/3*2)
          translateX($size/3*2)
          translateZ($size/-6)
          rotateY(-90deg)
          rotate(-90deg);
      }
      &.top {
        background: mix(black,$color,$darken1);
        transform-origin: 0 0%;
        transform:
          translateY($size/3*2)
          translateX($size/3*2)
          translateZ($size/6)
          rotate(90deg)
          rotateY(-90deg);
      }
      &.top_ {
        background: mix(black,$color,$darken1);
        transform-origin: 0 0%;
        transform:
          translateY($size/3*2)
          translateX($size)
          translateZ($size/6)
          rotate(90deg)
          rotateY(-90deg)
          rotate(90deg);
      }
      &.back {
        background: $color;
        transform-origin: 0 0%;
        transform:
          translateY($size/3*2)
          translateX($size/3*2)
          translateZ($size/6)
          rotate(90deg);
      }
      &.back_ {
        top: auto;
        bottom: 0;
        left: auto;
        right: 0;
        background: $color;
        transform-origin: 0 0%;
        transform:
          translateY($size/-3)
          //translateX($size)
          translateZ($size/6);
      }
    }
    
    .extend { 
      position: absolute;
      top: 0;
      left: 0;
      height: $size;
      width: $size;
      z-index: 99;
      
      .tbr-inner {
        position: absolute;
        bottom: 0;
        right: 0;
        height: $size/3;
        width: $size/3*2;
        &.left {
        background: mix(black,$color,$darken2);
          transform: 
            translateX($size/3*2)
            translateZ($size/6);
        }
        &.top {
         background: mix(black,$color,$darken1);
         transform: 
            translateZ($size/3)
            translateX($size/3*2)
            translateY($size/-6)
            rotateX(-90deg);
        }
        &._left {
        background: mix(black,$color,$darken2);
          transform: 
            translateY($size/2)
            translateX($size/6)
            translateZ($size/6)
            rotate(90deg);
        }
        &._top {
         background: $color;
         transform: 
            translateZ($size/3)
            translateY($size/2)
            rotateY(-90deg)
            rotate(-90deg);
        }
        &.left_ {
        background: $color;
          transform: 
            translateZ($size/6*5)
            rotateY(90deg);
        }
        &.top_ {
         background: mix(black,$color,$darken1);
         transform: 
            translateZ($size/6*5)
            translateX($size/6)
            translateY($size/-6)
            rotateY(-90deg)
            rotateX(-90deg);
        }
      }
    }
  }
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console