logo.scss

$size: 4px;
$width: 5 * $size;
$colors: #ddd, #bbb, #ddd, #fff, #bbb, #fff;

@function pow($number, $exponent) {
  $value: 1;

  @if $exponent > 0 {
    @for $i from 1 through $exponent {
      $value: $value * $number;
    }
  } @else if $exponent < 0 {
    @for $i from 1 through -$exponent {
      $value: $value / $number;
    }
  }

  @return $value;
}

.logo-container {
  height: 180px;
  width: 180px;
  perspective: 5000px;

  & * {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
  }
  &:hover .rotate {
    transform: rotateY(325deg);
  }
}

@mixin box($width, $height) {
  .face {
    position: absolute;
    margin: (-0.5 * $height) (-0.5 * $width);
    width: $width;
    height: $height;
  }

  .face:nth-child(n + 5) {
    margin-top: -0.5 * $width;
    height: $width;
  }

  @for $i from 0 to 6 {
    .face:nth-child(#{$i + 1}) {
      transform: if($i < 4, rotateY($i * 90deg), rotateX(pow(-1, $i) * 90deg))
        translateZ(0.5 * if($i < 4, $width, $height));
      background: nth($colors, $i + 1);
    }
  }
}

@keyframes rotate {
  0% {
    transform: rotateY(90deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

.logo {
  transform: rotateZ(45deg);
}

.rotate {
  animation: rotate 1s ease-out;
  transition: transform 800ms ease;
}

.top {
  transform: rotateZ(90deg) translate(-10 * $size, 5 * $size);
  @include box($width, 12 * $size);
}

.bottom {
  transform: rotateZ(90deg) translate3d(10 * $size, -5 * $size, 0);
  @include box($width, 12 * $size);
}

.middle {
  transform: rotateZ(90deg);
  @include box($width, 22 * $size);
}

.side {
  transform: translate3d(8.5 * $size, 5 * $size, 0);
  @include box($width, 6 * $size);
}