transform: translateX 正在影响 transform: translateY答案

【问题标题】：transform: translateX is affecting transform: translateYtransform: translateX 正在影响 transform: translateY
【发布时间】：2017-07-22 10:46:07
【问题描述】：

我正在尝试为汉堡菜单制作动画。当我尝试更改 .burger-icon:before - transform: translateX(20px) 中的 X 坐标时，它也会更改 Y。谢谢！

这里是 HTML：

<button class="menu-button" type="button" data-toggle="-menu" id="burger-button">
    <span class="burger-icon"></span>
</button>

这是我的 CSS：

.menu-button.is-active .burger-icon {
    transform: translateY(2px) rotate(135deg);
}
.menu-button.is-active .burger-icon:before {
    transform: translateX(20px) translateY(10px) rotate(-45deg);
}
.menu-button.is-active .burger-icon:after {
    transform: translateY(-19px) rotate(33deg);
}

【问题讨论】：

标签： html css transform translate

【解决方案1】：

当我尝试更改 .burger-icon:before - transform: translateX(20px) 中的 X 坐标时 - 它也会更改 Y。

你的意思是当你指定 only transform: translateY(10px)?

当然可以。

您仅在此处更改一个 CSS 属性的值 - 该属性为 transform。

如果您没有为不同的变换函数指定显式值 - 那么这些函数将采用它们的默认值。

【讨论】：

【解决方案2】：

我认为我没有得到这个问题。

当我尝试更改 .burger-icon:before - transform: translateX(20px) 中的 X 坐标时 - 它也会更改 Y。

在你的代码中你有：

.burger-icon:before {
    transform: translateX(20px) **translateY(10px)** rotate(-45deg);
}

你想说什么？如果您将代码更改为：

.burger-icon:before {
    transform: translateX(35px) translateY(10px) rotate(-45deg);
}

算法改变的y坐标？因为那会很奇怪。但是，如果您将其更改为：

.burger-icon:before {
    transform: translateX(35px);
}

这是正常的，因为您消除了translateY 转换，所以它恢复到其默认值 (0)。

我只是在这里猜测：

也许您正试图通过 JavaScript 更改 transform 的值，如下所示：

element.style.transform = "translateX(35px)";

那么在这种情况下，就好像您将变换属性值设置为“translateX(35px)”，所以我们的情况与上面解释的情况相同。

【讨论】：