Making a CSS Animated Mobile Burger Menu

Question

I looked over a few online tutorials and got a hamburger menu to work. However, after the animation from 3 bars to an X, the X icon isn't symmetrical.

Before: https://gyazo.com/351864d80fda15dfa2745ca1d1daa433
After: https://gyazo.com/7122592ea36e3f36d37d0779f4687a61

In the after image we see that the right side is smaller that the left side in the angle created. Both spans or lines have the same rotation angle and when inspected have the same height/width. It almost seems like a central axis of rotation is off. If the central axis was moved a bit to the left by say 2-3 pixels this would be fine. However, I don't know if this is even possible.

Here is the HTML:

<div id="burger-menu-wrapper">
    <a id="nav-toggle" class="js-menu-click" href="#">
        <div class="hamburger-menu">
            <span></span>
        </div>
        <h5>MENU</h5>
    </a>
</div>

Here is the CSS:

#nav-toggle .hamburger-menu{
  height:46px;
  position:relative;
  top:23px;
}
#nav-toggle .hamburger-menu span{
  margin:0 auto;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 3px;
  width: 35px;
  background: #000000;
  position: relative;
  display: block;
  content: '';
}
#nav-toggle span:before {
  top: -10px;
}
#nav-toggle span:after {
  bottom: -8px; 
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  transition: all 500ms ease-in-out;
}
#nav-toggle.active span {
  background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}
#nav-toggle.active span:before {
  transform: rotate(45deg);
}
#nav-toggle.active span:after {
  transform: rotate(-45deg);
}

Edit: Add HTML

Answer 1

There is a css attribute for this:

transform-origin: X-axis Y-axis; 

I simply made a few adjustments to these values to properly align the axis to make the X and Y axis properly line up.

Answer 2

I actually made a hamburger manu similar to this and these are my values for the before and after.

 .cross.active .span::before { top: 0px; transform: rotate(45deg); } .cross.active .span::after { top: 0; transform: rotate(-45deg); } .cross.active .span { background: none; } 

The .cross.active .span::before has top: 0px; and not top: 0;