<div class="icon-container">
  <div class="hamburger-icon icon-1">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="hamburger-icon icon-2">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="hamburger-icon icon-3">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>  

body {
  background: #212121;
  margin: 0;
  padding: 0;
}

$number-of-icons: 3;
$icon-size: 125px;
$icon-line-height: $icon-size / 5;
$icon-line-gutter: $icon-size / 5;
$icon-line-border-radius: 5px;
$icon-gutter: 50px;
$animation-speed: .3s;
$box-shadow-testing: 0 0 0 0 rgba(255, 255, 255, .3); // fully optional to test alignment.

.icon-container {
  width: ($icon-size * $number-of-icons) + $icon-gutter * ($number-of-icons * 2);
  height: ($icon-line-height * 3) + ($icon-line-gutter * 2) + ($icon-gutter * 2);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0;
  box-shadow: $box-shadow-testing; // this is for testing alignment in container.
}

.hamburger-icon {
  display: inline-block;
  width: $icon-size;
  height: $icon-line-height * 3 + ($icon-line-gutter * 2);
  margin: $icon-gutter;
  position: relative;
  transform: rotate(0deg);
  transition: $animation-speed ease-in-out;
  cursor: pointer;
  box-shadow: $box-shadow-testing;
}

span {
  display: block;
  position: absolute;
  height: $icon-line-height;
  width: 100%;
  border-radius: $icon-line-border-radius;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: $animation-speed ease-in-out;
}

.icon-1 {
  span {
      background: #FFEE58;
  }
  span:nth-child(1) {
    top: $icon-line-gutter / 3;
    transform-origin: left center;
  }
  
  span:nth-child(2) {
    top: $icon-line-gutter + $icon-line-height;
    transform-origin: left center;
  }
  
  span:nth-child(3) {
    bottom: $icon-line-gutter / 3;
    transform-origin: left center;
  }
  
  &.open {
    span:nth-child(1) {
      transform: rotate(45deg);
      top: $icon-line-gutter / 5.5;
      left: $icon-line-gutter / 1.3;
    }
 
    span:nth-child(2) {
      width: 0%;
      opacity: 0;
    }
    
    span:nth-child(3) {
      transform: rotate(-45deg);
      left: $icon-line-gutter / 1.3;
      bottom: $icon-line-gutter / 5;
    }
  }
}

.icon-2 {
  span {
      background: #8BC34A;
  }
  span:nth-child(1) {
    top: $icon-line-gutter / 3;
    transform-origin: left center;
  }
  
  span:nth-child(2) {
    top: $icon-line-gutter + $icon-line-height;
    transform-origin: left center;
  }
  
  span:nth-child(3) {
    bottom: $icon-line-gutter / 3;
    transform-origin: left center;
  }
  
  &.open {
    span:nth-child(1) {
      transform: rotate(45deg);
      top: $icon-line-gutter / 5.5;
      left: $icon-line-gutter / 1.3;
    }
 
    span:nth-child(2) {
      width: 0%;
      opacity: 0;
      left: 50%;
    }
    
    span:nth-child(3) {
      transform: rotate(-45deg);
      left: $icon-line-gutter / 1.3;
      bottom: $icon-line-gutter / 5;
    }
  }
}

.icon-3 {
  span {
      background: #CDDC39;
  }
  
  span:nth-child(1) {
    top: $icon-line-gutter / 3;
  }

  span:nth-child(2), 
  span:nth-child(3) {
    top: $icon-line-gutter + $icon-line-height;
  }

  span:nth-child(4) {
    bottom: $icon-line-gutter / 3;
  }
  
  &.open {
    span:nth-child(1), 
    span:nth-child(4) {
      width: 0%;
      left: 50%;
      opacity: 0;
    }

    span:nth-child(2) {
      transform: rotate(45deg);
    }

    span:nth-child(3) {
      transform: rotate(-45deg);
    }

    span:nth-child(4) {
      bottom: $icon-line-gutter / 3;
    }
  }
}

$(document).ready(function () {
  $('.hamburger-icon').on('click', function () {
      $(this).toggleClass('open');
  });
});