<div class="hamburger">
  <span class="line"></span>
  <span class="line"></span>
  <span class="line"></span>
</div>

.hamburger {
  width: 30px;
  height: 20px;
  position: relative;
  .line {
    display: block;
    width: 100%;
    height: 2px;
    background: #000;
    position: absolute;
    transition: all 200ms;
    &:nth-child(1) {
      top: 0;
    }
    &:nth-child(2) {
      top: 50%;
      transform: translateY(-50%);
    }
    &:nth-child(3) {
      bottom: 0;
    }
  }
  &.close {
    .line {
      &:nth-child(1),
      &:nth-child(2) {
        top: 0;
        transform: translateY(9px) rotate(45deg);
      }
      &:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
      }
    }
  }
  
  margin: auto; // centered for your amusement
}

// extra crap

body {
  margin: 20px;
}

$('.hamburger').click(function(e) {
  $(this).toggleClass('close');
});