<div class="demo-cont">
  <div class="demo">
    <div class="demo__btm">
      <div class="demo__btm-bottom">
        <div class="my-links">
          <a href="https://twitter.com/NikolayTalanov" target="_blank">Twitter</a>
          <a href="https://codepen.io/suez/public/" target="_blank">My other demos</a>
        </div>
      </div>
      <div class="demo__btm-side m--left"></div>
      <div class="demo__btm-side m--front"></div>
      <div class="demo__btm-side m--right"></div>
      <div class="demo__btm-side m--back"></div>
      <div class="demo__btm-top"></div>
    </div>
    <div class="demo__mid">
      <div class="demo__mid-bottom"></div>
      <div class="demo__mid-side m--left"></div>
      <div class="demo__mid-side m--front"></div>
      <div class="demo__mid-side m--right"></div>
      <div class="demo__mid-side m--back"></div>
      <div class="demo__mid-top"></div>
    </div>
    <div class="demo__top">
      <div class="demo__top-bottom"></div>
      <div class="demo__top-side m--left"></div>
      <div class="demo__top-side m--front"></div>
      <div class="demo__top-side m--right"></div>
      <div class="demo__top-side m--back"></div>
      <div class="demo__top-top"></div>
    </div>
    <div class="demo__panelBack">
      <div class="demo__panelBack-bottom">
        <h1 class="heading">Pure css 3d synthesizer</h1>
      </div>
      <div class="demo__panelBack-side m--left"></div>
      <div class="demo__panelBack-side m--front"></div>
      <div class="demo__panelBack-side m--right"></div>
      <div class="demo__panelBack-side m--back"></div>
      <div class="demo__panelBack-top"></div>
    </div>
    <div class="demo__panelFrontL">
      <div class="demo__panelFrontL-bottom"></div>
      <div class="demo__panelFrontL-side m--left"></div>
      <div class="demo__panelFrontL-side m--front"></div>
      <div class="demo__panelFrontL-side m--right"></div>
      <div class="demo__panelFrontL-side m--back"></div>
      <div class="demo__panelFrontL-top"></div>
    </div>
    <div class="demo__panelFrontR">
      <div class="demo__panelFrontR-bottom"></div>
      <div class="demo__panelFrontR-side m--left"></div>
      <div class="demo__panelFrontR-side m--front"></div>
      <div class="demo__panelFrontR-side m--right"></div>
      <div class="demo__panelFrontR-side m--back"></div>
      <div class="demo__panelFrontR-top"></div>
    </div>
    <div class="demo__panelKeys">
      <div class="demo__panelKeys-key">
        <div class="demo__panelKeys-key-bottom"></div>
        <div class="demo__panelKeys-key-side m--left"></div>
        <div class="demo__panelKeys-key-side m--front"></div>
        <div class="demo__panelKeys-key-side m--right"></div>
        <div class="demo__panelKeys-key-side m--back"></div>
        <div class="demo__panelKeys-key-top"></div>
      </div>
      <div class="demo__panelKeys-key">
        <div class="demo__panelKeys-key-bottom"></div>
        <div class="demo__panelKeys-key-side m--left"></div>
        <div class="demo__panelKeys-key-side m--front"></div>
        <div class="demo__panelKeys-key-side m--right"></div>
        <div class="demo__panelKeys-key-side m--back"></div>
        <div class="demo__panelKeys-key-top"></div>
      </div>
      <div class="demo__panelKeys-key">
        <div class="demo__panelKeys-key-bottom"></div>
        <div class="demo__panelKeys-key-side m--left"></div>
        <div class="demo__panelKeys-key-side m--front"></div>
        <div class="demo__panelKeys-key-side m--right"></div>
        <div class="demo__panelKeys-key-side m--back"></div>
        <div class="demo__panelKeys-key-top"></div>
      </div>
      <div class="demo__panelKeys-key">
        <div class="demo__panelKeys-key-bottom"></div>
        <div class="demo__panelKeys-key-side m--left"></div>
        <div class="demo__panelKeys-key-side m--front"></div>
        <div class="demo__panelKeys-key-side m--right"></div>
        <div class="demo__panelKeys-key-side m--back"></div>
        <div class="demo__panelKeys-key-top"></div>
      </div>
      <div class="demo__panelKeys-key">
        <div class="demo__panelKeys-key-bottom"></div>
        <div class="demo__panelKeys-key-side m--left"></div>
        <div class="demo__panelKeys-key-side m--front"></div>
        <div class="demo__panelKeys-key-side m--right"></div>
        <div class="demo__panelKeys-key-side m--back"></div>
        <div class="demo__panelKeys-key-top"></div>
      </div>
      <div class="demo__panelKeys-key">
        <div class="demo__panelKeys-key-bottom"></div>
        <div class="demo__panelKeys-key-side m--left"></div>
        <div class="demo__panelKeys-key-side m--front"></div>
        <div class="demo__panelKeys-key-side m--right"></div>
        <div class="demo__panelKeys-key-side m--back"></div>
        <div class="demo__panelKeys-key-top"></div>
      </div>
      <div class="demo__panelKeys-key">
        <div class="demo__panelKeys-key-bottom"></div>
        <div class="demo__panelKeys-key-side m--left"></div>
        <div class="demo__panelKeys-key-side m--front"></div>
        <div class="demo__panelKeys-key-side m--right"></div>
        <div class="demo__panelKeys-key-side m--back"></div>
        <div class="demo__panelKeys-key-top"></div>
      </div>
      <div class="demo__panelKeys-key">
        <div class="demo__panelKeys-key-bottom"></div>
        <div class="demo__panelKeys-key-side m--left"></div>
        <div class="demo__panelKeys-key-side m--front"></div>
        <div class="demo__panelKeys-key-side m--right"></div>
        <div class="demo__panelKeys-key-side m--back"></div>
        <div class="demo__panelKeys-key-top"></div>
      </div>
      <div class="demo__panelKeys-key">
        <div class="demo__panelKeys-key-bottom"></div>
        <div class="demo__panelKeys-key-side m--left"></div>
        <div class="demo__panelKeys-key-side m--front"></div>
        <div class="demo__panelKeys-key-side m--right"></div>
        <div class="demo__panelKeys-key-side m--back"></div>
        <div class="demo__panelKeys-key-top"></div>
      </div>
      <div class="demo__panelKeys-key">
        <div class="demo__panelKeys-key-bottom"></div>
        <div class="demo__panelKeys-key-side m--left"></div>
        <div class="demo__panelKeys-key-side m--front"></div>
        <div class="demo__panelKeys-key-side m--right"></div>
        <div class="demo__panelKeys-key-side m--back"></div>
        <div class="demo__panelKeys-key-top"></div>
      </div>
      <div class="demo__panelKeys-key">
        <div class="demo__panelKeys-key-bottom"></div>
        <div class="demo__panelKeys-key-side m--left"></div>
        <div class="demo__panelKeys-key-side m--front"></div>
        <div class="demo__panelKeys-key-side m--right"></div>
        <div class="demo__panelKeys-key-side m--back"></div>
        <div class="demo__panelKeys-key-top"></div>
      </div>
      <div class="demo__panelKeys-key">
        <div class="demo__panelKeys-key-bottom"></div>
        <div class="demo__panelKeys-key-side m--left"></div>
        <div class="demo__panelKeys-key-side m--front"></div>
        <div class="demo__panelKeys-key-side m--right"></div>
        <div class="demo__panelKeys-key-side m--back"></div>
        <div class="demo__panelKeys-key-top"></div>
      </div>
      <div class="demo__panelKeys-key">
        <div class="demo__panelKeys-key-bottom"></div>
        <div class="demo__panelKeys-key-side m--left"></div>
        <div class="demo__panelKeys-key-side m--front"></div>
        <div class="demo__panelKeys-key-side m--right"></div>
        <div class="demo__panelKeys-key-side m--back"></div>
        <div class="demo__panelKeys-key-top"></div>
      </div>
      <div class="demo__panelKeys-key">
        <div class="demo__panelKeys-key-bottom"></div>
        <div class="demo__panelKeys-key-side m--left"></div>
        <div class="demo__panelKeys-key-side m--front"></div>
        <div class="demo__panelKeys-key-side m--right"></div>
        <div class="demo__panelKeys-key-side m--back"></div>
        <div class="demo__panelKeys-key-top"></div>
      </div>
      <div class="demo__panelKeys-key">
        <div class="demo__panelKeys-key-bottom"></div>
        <div class="demo__panelKeys-key-side m--left"></div>
        <div class="demo__panelKeys-key-side m--front"></div>
        <div class="demo__panelKeys-key-side m--right"></div>
        <div class="demo__panelKeys-key-side m--back"></div>
        <div class="demo__panelKeys-key-top"></div>
      </div>
      <div class="demo__panelKeys-key">
        <div class="demo__panelKeys-key-bottom"></div>
        <div class="demo__panelKeys-key-side m--left"></div>
        <div class="demo__panelKeys-key-side m--front"></div>
        <div class="demo__panelKeys-key-side m--right"></div>
        <div class="demo__panelKeys-key-side m--back"></div>
        <div class="demo__panelKeys-key-top"></div>
      </div>
      <div class="demo__panelKeys-key">
        <div class="demo__panelKeys-key-bottom"></div>
        <div class="demo__panelKeys-key-side m--left"></div>
        <div class="demo__panelKeys-key-side m--front"></div>
        <div class="demo__panelKeys-key-side m--right"></div>
        <div class="demo__panelKeys-key-side m--back"></div>
        <div class="demo__panelKeys-key-top"></div>
      </div>
      <div class="demo__panelKeys-key">
        <div class="demo__panelKeys-key-bottom"></div>
        <div class="demo__panelKeys-key-side m--left"></div>
        <div class="demo__panelKeys-key-side m--front"></div>
        <div class="demo__panelKeys-key-side m--right"></div>
        <div class="demo__panelKeys-key-side m--back"></div>
        <div class="demo__panelKeys-key-top"></div>
      </div>
      <div class="demo__panelKeys-key">
        <div class="demo__panelKeys-key-bottom"></div>
        <div class="demo__panelKeys-key-side m--left"></div>
        <div class="demo__panelKeys-key-side m--front"></div>
        <div class="demo__panelKeys-key-side m--right"></div>
        <div class="demo__panelKeys-key-side m--back"></div>
        <div class="demo__panelKeys-key-top"></div>
      </div>
      <div class="demo__panelKeys-key">
        <div class="demo__panelKeys-key-bottom"></div>
        <div class="demo__panelKeys-key-side m--left"></div>
        <div class="demo__panelKeys-key-side m--front"></div>
        <div class="demo__panelKeys-key-side m--right"></div>
        <div class="demo__panelKeys-key-side m--back"></div>
        <div class="demo__panelKeys-key-top"></div>
      </div>
    </div>
  </div>
</div>
<p class="you-can">You can rotate camera with pressed mouse</p>
<button type="button" class="rerun">Rerun appearance animation</button>
@import "compass/css3";

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  font-size: 62.5%;
  height: 100%;
}
body {
  background: #CEE5D5;
  cursor: all-scroll;
}
$subPixel: 0.05rem;
$mainColor: #334A5C;
$midColor: mix(black, $mainColor, 15%);
$lightColor: #4A6473;
$semiLight: mix(black, $lightColor, 10%);
$lightGreen: #79AFA9;
$width: 80rem;
$sideWidth: 20rem;

$bottomSideHeight: 4rem;
$bottomAngle: 20deg;
$bottomSinW: sin($bottomAngle);
$bottomCosH: cos($bottomAngle);
$bottomHeight: $bottomCosH*$bottomSideHeight;
$bottomPartWidth: $bottomSideHeight*$bottomSinW;

$bigWidth: $width + $bottomPartWidth*2;
$bigHeight: $sideWidth + $bottomPartWidth*2;

$midHeight: 0.6rem;

$topSideHeight: 1.5rem;
$topAngle: 20deg;
$topSinW: sin($topAngle);
$topCosH: cos($topAngle);
$topHeight: $topCosH*$topSideHeight;
$topPartWidth: $topSideHeight*$topSinW;

$PBSideHeight: 2.5rem;
$PBAngle: 20deg;
$PBSinW: sin($PBAngle);
$PBCosH: cos($PBAngle);
$PBHeight: $PBCosH*$PBSideHeight;
$PBPartWidth: $PBSideHeight*$PBSinW;
$topPlatformSideW: $sideWidth + $topPartWidth*2;
$PBSideWidth: $topPlatformSideW*0.3;
$PBAngledSideWidth: $PBSideWidth + $PBPartWidth;

$PFLSideWidth: $topPlatformSideW*0.7 - $PBPartWidth*2;
$PFLSPattern: $PFLSideWidth * 0.035;

$panelTopW: $width + $topPartWidth*2 - $PBPartWidth*2;
$PFLWidth: ($width + $topPartWidth*2 - $PBPartWidth*2) * 0.15;
$PFRWidth: $PFLWidth/4;
$keysWidth: $panelTopW - $PFLWidth - $PFRWidth;

$keyHeight: 1rem;
$keyWidth: $keysWidth / 25;
$numOfKeys: 20;
$keyMargin: $keysWidth / 5 / ($numOfKeys - 1);

// Z VALUES
$bottomZ: -10rem;
$midZ: $bottomZ + $bottomHeight;
$topZ: $midZ + $midHeight;
$PBZ: $topZ + $topHeight;

// ANIMS
$btmATime: 1s;
$midDelay: $btmATime;
$midATime: 0.7s;
$topDelay: $midATime + $midDelay;
$topATime: 1s;
$panelDelay: $topATime + $topDelay;
$panelATime: 0.7s;
$keysDelay: $panelATime + $panelDelay;
$keysATime: 1s;

@mixin platform($Z, $rotate: 0, $partW: 0, $bgColor: $mainColor, $SW: $sideWidth, $fullW: $width, $partH: 0) {
  @if $partH == 0 {
    $partH: $partW*2;
  }
  position: absolute;
  left: -$partW;
  top: -$partW;
  width: $fullW + $partW*2;
  height: $SW + $partH;
  background-color: $bgColor !important;
  transform: translateZ($Z) rotateY($rotate);
}

@mixin bottom($partW: 0) {
  position: absolute;
  left: -$partW;
  top: -$partW;
  $W: if($partW == 0, 0px, $partW*2);
  $H: if($partW == 0, 0px, $partW*2);
  width: calc(100% + #{$W});
  height: calc(100% + #{$W});
  transform: rotateX(180deg);
}
@mixin top($Z, $partW: 0, $addW: 0, $addH: 0) {
  position: absolute;
  left: -$partW;
  top: -$partW;
  $W: if($partW == 0, 0px, $partW*2);
  width: calc(100% + #{$W});
  @if $addW != 0 {
    width: calc(100% + #{$addW});
  }
  $H: if($partW == 0, 0px, $partW*2);
  height: calc(100% + #{$W});
  @if $addH != 0 {
    height: calc(100% + #{$addH});
  }
  transform: translateZ($Z);
}
@mixin side {
  position: absolute;
  transform-origin: 50% 100%;
}

@mixin sideLeft($H, $angle: 0, $partW: 0, $SW: $sideWidth) {
  left: $SW/-2 - $partW;
  top: 50%;
  margin-top: -$H;
  width: $SW;
  height: $H;
  transform: rotate(-90deg) rotateX((90deg - $angle) * -1) rotateY(180deg);
}
@mixin sideFront($H, $angle: 0, $partW: 0) {
  left: 0;
  bottom: 0;
  width: 100%;
  height: $H;
  transform: rotateX((90deg + $angle) * -1);
}
@mixin sideRight($H, $angle: 0, $partW: 0, $SW: $sideWidth) {
  right: $SW/-2 - $partW;
  top: 50%;
  margin-top: -$H;
  width: $SW;
  height: $H;
  transform: rotate(90deg) rotateX((90deg - $angle) * -1) rotateY(180deg);
}
@mixin sideBack($H, $angle : 0, $partW: 0) {
  left: 0;
  top: -$H - $partW;
  width: 100%;
  height: $H;
  transform: rotateY(180deg) rotateX(90deg - $angle);
}

@mixin allSides($H, $angle: 0, $partW: 0, $SW: $sideWidth) {
  &.m--left {
    @include sideLeft($H, $angle, $partW, $SW);
  }

  &.m--front {
    @include sideFront($H, $angle, $partW);
  }

  &.m--right {
    @include sideRight($H, $angle, $partW, $SW);
  }

  &.m--back {
    @include sideBack($H, $angle, $partW);
  }
}

@mixin sideCorners($W, $H, $color: $mainColor, $revW: 0) {
  $defaultColor: $color;
  $reverseColor: transparent;
  $leftShift: $W;
  @if $W == 0 {
    $defaultColor: transparent;
    $reverseColor: $mainColor;
    $leftShift: $revW;
  }
  &:before, &:after {
    content: "";
    position: absolute;
    display: block;
    border-style: solid;
    background-color: transparent !important;
  }

  &:before {
    left: -$leftShift;
    top: 0;
    border-width: 0 $W $H $revW;
    border-color: transparent $color $reverseColor transparent;
  }

  &:after {
    right: -$leftShift;
    top: 0;
    border-width: $H $W 0 $revW;
    border-color: $color transparent transparent $reverseColor;
  }
}
.demo-cont {
  position: relative;
  height: 100vh;
  perspective: 2000px;
}
.demo {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: $width/-2;
  margin-top: $sideWidth/-2;
  width: $width;
  height: $sideWidth;
  transform-style: preserve-3d;
  transform: rotateX(75deg) rotateZ(-50deg);
  will-change: transform;
  user-select: none;
  
  div, div:before, div:after {
    //backface-visibility: hidden;
    transform-style: preserve-3d;
    background-color: inherit;
  }
  
  &__btm {
    @include platform($bottomZ, 0);
    transform: translateZ($bottomZ*2);
    opacity: 0;
    animation: btmAnim $btmATime forwards;
    
    &-bottom {
      @include bottom;
    }
    
    &-top {
      @include top($bottomHeight - $subPixel, $bottomPartWidth);
    }
    
    &-side {
      @include side;
      @include allSides($bottomSideHeight, $bottomAngle);
      @include sideCorners($bottomPartWidth, $bottomSideHeight);
    }
  }

  &__mid {
    @include platform($midZ, 0, 0, $midColor);
    transform: translateZ(-$midZ*2);
    opacity: 0;
    animation: midAnim $midATime $midDelay forwards;
    
    &-bottom {
      @include bottom;
    }
    
    &-top {
      @include top($midHeight);
    }
    
    &-side {
      @include side;
      @include allSides($midHeight);
    }
  }

  &__top {
    @include platform($topZ + $topHeight, 180deg, $topPartWidth, $mainColor);
    $topSideWidth: $sideWidth + $topPartWidth*2;
    transform: translateZ(($topZ + $topHeight)*-1.5) rotateY(180deg);
    opacity: 0;
    animation: topAnim $topATime $topDelay forwards;
    
    &-bottom {
      @include bottom;
    }
    
    &-top {
      @include top($topHeight - $subPixel, $topPartWidth);
    }
    
    &-side {
      @include side;
      @include allSides($topSideHeight, $topAngle, 0, $topSideWidth);
      @include sideCorners($topPartWidth, $topSideHeight);
    }
  }
  
  &__panelBack {
    @include platform($PBZ + $PBHeight, 180deg, 0, $lightColor, $PBSideWidth, $width + $topPartWidth*2 - $PBPartWidth*2);
    left: $PBPartWidth/2;
    top: $PBPartWidth/2;
    transform: translateZ(($PBZ + $PBHeight)*-1.5) rotateY(180deg);
    opacity: 0;
    animation: panelAnim $panelATime $panelDelay forwards;
    
    &-bottom {
      @include bottom;
      
      &:before {
        content: "";
        position: absolute;
        left: 0;
        top: 2rem;
        width: 100%;
        height: 0.2rem;
        background: #243446 !important;
        transform: translateZ(0.1rem);
      }
      
      &:after {
        content: "";
        position: absolute;
        left: $PFRWidth;
        top: 0.5rem;
        width: $keysWidth;
        height: 0.7rem;
        background: $lightGreen !important;
        transform: translateZ(0.1rem);
      }
    }
    
    &-top {
      @include top($PBHeight, $PBPartWidth, 0, $PBPartWidth);
    }
    
    &-side {
      @include side;
      @include allSides($PBSideHeight, $PBAngle, 0, $PBSideWidth);
      @include sideCorners($PBPartWidth, $PBSideHeight, $lightColor);
      
      &.m--left:after {
        display: none;
      }
      
      &.m--front {
        @include sideFront($PBSideHeight, 0);
        background: $semiLight;
      }
      
      &.m--right:before {
        display: none;
      }
    }
  }
  
  &__panelFrontL {
    @include platform($PBZ + $PBHeight, 180deg, 0, $lightColor, $PFLSideWidth, $PFLWidth);
    left: $PBPartWidth/2;
    top: $PBSideWidth + $PBPartWidth/2;
    transform: translateZ(($PBZ + $PBHeight)*-1.5) rotateY(180deg);
    opacity: 0;
    animation: panelAnim $panelATime $panelDelay forwards;
    
    &-bottom {
      @include bottom;
      
      &:after {
        content: "";
        position: absolute;
        left: 0;
        top: 15%;
        width: 100%;
        height: 3.5%;
        background: #283646 !important;
        color: #283646;
        box-shadow: 0 $PFLSPattern*2, 0 $PFLSPattern*4, 0 $PFLSPattern*6, 0 $PFLSPattern*8, 0 $PFLSPattern*10, 0 $PFLSPattern*12, 0 $PFLSPattern*14, 0 $PFLSPattern*16, 0 $PFLSPattern*18;
        transform: translateZ(0.1rem);
      }
    }
    
    &-top {
      @include top($PBHeight, 0, $PBPartWidth, $PBPartWidth);
      top: 0;
    }
    
    &-side {
      @include side;
      @include allSides($PBSideHeight, $PBAngle, 0, $PFLSideWidth);
      @include sideCorners($PBPartWidth, $PBSideHeight, $lightColor);
      
      &.m--left {
        @include sideLeft($PBSideHeight, 0, 0, $PFLSideWidth);
        background: $semiLight;
      }
      
      &.m--back {
        @include sideBack($PBSideHeight, 0);
      }
      
      &.m--left:before,
      &.m--right:after,
      &.m--back:after,
      &.m--front:before {
        display: none;
      }
    }
  }
  
  &__panelFrontR {
    @include platform($PBZ + $PBHeight, 180deg, 0, $lightColor, $PFLSideWidth, $PFRWidth);
    left: auto;
    right: $PBPartWidth/2;
    top: $PBSideWidth + $PBPartWidth/2;
    transform: translateZ(($PBZ + $PBHeight)*-1.5) rotateY(180deg);
    opacity: 0;
    animation: panelAnim $panelATime $panelDelay forwards;
    
    &-bottom {
      @include bottom;
    }
    
    &-top {
      @include top($PBHeight, 0, $PBPartWidth, $PBPartWidth);
      top: 0;
      left: -$PBPartWidth;
    }
    
    &-side {
      @include side;
      @include allSides($PBSideHeight, $PBAngle, 0, $PFLSideWidth);
      @include sideCorners($PBPartWidth, $PBSideHeight, $lightColor);
      
      &.m--right {
        @include sideRight($PBSideHeight, 0, 0, $PFLSideWidth);
        background: $semiLight;
        transform: rotate(90deg) rotateX(-90deg) rotateY(180deg) translateZ(-0.2rem);
        
        &:before {
          color: $semiLight;
        }
      }
      
      &.m--back {
        @include sideBack($PBSideHeight, 0);
      }

      &.m--left:before,
      &.m--right:after,
      &.m--back:before,
      &.m--front:after {
        display: none;
      }
    }
  }
  
  &__panelKeys {
    position: absolute;
    left: $PBPartWidth/2 + $PFLWidth;
    top: $PBSideWidth + $PBPartWidth/2;
    width: $keysWidth;
    height: $PFLSideWidth;
    transform: translateZ($PBZ);
    
    
    &-key {
      @include platform(0, 0, 0, #fff, $PFLSideWidth, $keyWidth);
      cursor: pointer;
      transform-origin: 50% 0;
      transform: translateZ(5rem);
      opacity: 0;
      
      .demo.ready & {
        opacity: 1;
        transform: translateZ(0);
      }
      
      @for $i from 1 through $numOfKeys {
        &:nth-child(#{$i}) {
          left: ($i - 1) * ($keyWidth + $keyMargin);
          animation: keyAnim $panelATime (($i - 1) * 0.05s + $panelDelay) forwards;
        }
      }
    
      &.pressed {
        animation: keyPress 1s;
      }
    
      &-bottom {
        @include bottom;
      }

      &-top {
        @include top($keyHeight);
      }

      &-side {
        @include side;
        @include allSides($keyHeight, 0, 0, $PFLSideWidth);
        background: #cfcfcf !important;
      }
    }
  }
  
}

.heading {
  position: absolute;
  left: 50%;
  bottom: 0rem;
  transform: translate(-50%, -50%) rotate(180deg) translateZ(0.1rem);
  color: $lightGreen;
  text-transform: uppercase;
  font-size: 2rem;
}

@keyframes keyPress {
  50% {
    transform: rotateX(-3deg);
  }
  100% {
    transform: rotateX(0);
  }
}

@keyframes btmAnim {
  to {
    transform: translateZ($bottomZ);
    opacity: 1;
  }
}
@keyframes midAnim {
  to {
    transform: translateZ($midZ);
    opacity: 1;
  }
}
@keyframes topAnim {
  to {
    transform: translateZ($topZ + $topHeight) rotateY(180deg);
    opacity: 1;
  }
}
@keyframes panelAnim {
  to {
    transform: translateZ($PBZ + $PBHeight) rotateY(180deg);
    opacity: 1;
  }
}
@keyframes keyAnim {
  to {
    transform: translateZ(0);
    opacity: 1;
  }
}

.my-links {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateZ(0.1rem);
  
  a {
    text-align: center;
    color: #fff;
    display: block;
    margin: 1rem 0;
    font-size: 2rem;
  }
}

.you-can {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  font-size: 1.5rem;
  color: #000;
  user-select: none;
}

.rerun {
  position: absolute;
  right: 0.5rem;
  background: transparent;
  top: 0.5rem;
  border: none;
  font-size: 2rem;
  color: #000;
  cursor: pointer;
  user-select: none;
  
  &:focus {
    outline: none;
  }
}
/*
JS used only for camera rotation, key click event's and for appearance animation rerun
*/
$(document).ready(function() {
  
  var winW = $(window).width();
  var winH = $(window).height();
  var $demo = $(".demo");
  var $rerun = $(".rerun");
  var rotation = {
    x: 75,
    z: -50
  };
  var prevValues = {
    x: 0,
    y: 0
  };
  var rotationActive = false;
  var startAnimTime = 5400;
  var timeout = setTimeout(function() {
    $demo.addClass("ready");
  }, 4400);
  
  $(document).on("mousedown", function(e) {
    var startX = e.pageX;
    var startY = e.pageY;
    
    $(document).on("mousemove", function(e) {
      var deltaX;
      var deltaY;
      if (!rotationActive) {
        deltaX = startX - e.pageX;
        deltaY = startY - e.pageY;
        rotationActive = true;
      } else {
        deltaX = prevValues.x - e.pageX;
        deltaY = prevValues.y - e.pageY;
      }
      prevValues.x = e.pageX;
      prevValues.y = e.pageY;
      
      var degX = deltaX * 100 / 360;
      var degY = deltaY * 100 / 360;
      
      rotation.x += degY;
      rotation.z += degX;
      
      $demo.css("transform", "rotateX("+rotation.x+"deg) rotateZ("+rotation.z+"deg)");
    });
    
    $(document).on("mouseup", function(e) {
      $(document).off("mousemove");
      $(document).off("mouseup");
      rotationActive = false;
      prevValues.x = 0;
      prevValues.y = 0;
    });
  });
  
  $(document).on("click", ".demo__panelKeys-key", function() {
    $(this).removeClass("pressed");
    $(this).css("top");
    $(this).addClass("pressed");
  });
  
  $(document).on("click", ".rerun", function() {
    window.clearTimeout(timeout);
    $(".demo__panelKeys-key").removeClass("pressed");
    $demo.hide().removeClass("ready");
    $demo.css("top");
    $demo.show();
    
    timeout = setTimeout(function() {
      $demo.addClass("ready");
    }, 4400);
  });
  
  $(window).on("resize", function() {
    winW = $(window).width();
    winH = $(window).height();
  });
  
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js