制作CSS动画移动汉堡菜单

Question

我浏览了一些在线教程，得到了一份汉堡菜单。但是，在动画从3条线变为X线之后，X图标并不对称。

之前：https://gyazo.com/351864d80fda15dfa2745ca1d1daa433

之后：https://gyazo.com/7122592ea36e3f36d37d0779f4687a61

在后面的图像中，我们看到在创建的角度中，右侧比左侧小。两个跨度或线条具有相同的旋转角度，并且在检查时具有相同的高度/宽度。它几乎看起来像是关闭了一个中心旋转轴。如果中心轴稍微向左移动2-3个像素，那就没问题了。然而，我甚至不知道这是否可能。

下面是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>

下面是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);
}

编辑:添加HTML

Answer 1

这里有一个css属性：

transform-origin: X-axis Y-axis; 

我只是简单地对这些值进行了一些调整，以正确对齐轴，使X轴和Y轴正确对齐。

Answer 2

我实际上做了一个与此类似的汉堡包manu，这些是我在之前和之后的值。

​

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

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

.cross.active .span {
    background: none;
}

​

.cross.active .span::before具有top: 0px；而不是top: 0；