<div>
  <span class="bar1"></span>
  <span class="bar2"></span>
  <span class="bar3"></span>
</div>

div {
  position: relative;
  width: 100px;
  height: 100px;
  border: 10px solid #444;
  box-sizing: border-box;
}

/* 三本線のスタイルを決める */
span {
  display: block;
  width: 60px;
  height: 10px;
  background: #444;
  position: absolute;
  left: 10px;
  transition: all 0.5s ease;
}

/* 線の縦位置の調整 */
.bar1 { 
  top: 12.5px;
  background-color: blue;
}
.bar2 {
  top: 35px;
  background-color: yellow;
}
.bar3 {
  bottom: 12.5px;
  background-color: red;
}

/*
  ハンバーガーメニューがクリックされたら
  上の線を真ん中に移動させて45℃回転
*/
.bar1.open {
  top: 35px;
  transform: rotate(45deg);
}
/* 
  ハンバーガーメニューがクリックされたら
  真ん中の線は透明化して見えないようにする
*/
.bar2.open { opacity: 0; }

/*
  ハンバーガーメニューがクリックされたら
  下の線は真ん中に移動させて-45℃回転
*/
.bar3.open {
  top: 35px;
  transform: rotate(-45deg);
}

//  ハンバーガーメニューがクリックされるたびにopenというクラスを付け外しする
$(function() {
  $('div').click(function() {
    $('.bar1, .bar2, .bar3').toggleClass('open');
  })
});