Question

我试图为汉堡菜单制作动画。当我尝试更改.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);
}

Answer 1

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

您的意思是指定仅 transform: translateY(10px)？

嗯，当然可以。

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

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

Answer 2

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

当我尝试更改.burger-icon中的X坐标时：before - transform：translateX（20px） - 它也会更改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改变转换的价值，如下所示：

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

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

transform：translateX正在影响transform：translateY

2 个答案: