JQuery .click 事件后元素未居中（尽管进行了 transform-origin 调整）

Question

如下面的 JSfiddle 所示，点击事件发生后，两个 span（块）元素旋转 45 度，形成一个 "X"。然而，两个元素都被稍微向左拉，形成一个 "X"，它与 parent 的真实 center-origin.

稍微 off-center

我将非常感谢演示如何在 parent 的真正中心放置我的 "X" 表单。另外，如果有人能在别处找到答案，我将不胜感激，因为我的搜索结果是空的。

目前我正在使用下面的"transform-origin"来形成点击事件后的"X"：

transform-origin: 21% 50%;

没有它，事情真的很乱。

这是 JSfiddle：https://jsfiddle.net/STEEZENS/L74p1ok3/

HTML

<a href="#" id="hamburger-icon" title="Menu">
<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>

Answer 1

我能够通过将 transform-origin 更改为绝对值 (px) 并在旋转之外添加 translateX 来补偿 (?)以前存在的翻译。

https://jsfiddle.net/voz8Lnhd/1/

#hamburger-icon .line {
    display: block;
    position: absolute;
    width: 75px;
    height: 4px;
    border-radius: 4px;
    background-color: white;
    transition: all .3s ease 0s;
    transform-origin: 21px center;
}
#hamburger-icon.active-rotate .line-1 {
    transform: rotate(45deg) translateX(6px);
    -webkit-transform: rotate(45deg) translateX(6px);
    -moz-transform: rotate(45deg) translateX(6px);

}
#hamburger-icon.active-rotate .line-3 {
    transform: rotate(-45deg) translateX(6px);
    -webkit-transform: rotate(-45deg) translateX(6px);
    -moz-transform: rotate(-45deg) translateX(6px);
}

JQuery .click 事件后元素未居中（尽管进行了 transform-origin 调整）

Elements not centered after JQuery .click Event (despite transform-origin adjustment)

javascript

css

jquery

center