变换：translateX 正在影响变换：translateY

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:before 中的 X 坐标时 -

transform: translateX(20px)

- 它也会更改 Y。

您的意思是当您指定 only

transform: translateY(10px)

时？

嗯，当然可以。

您仅在此处更改单个 CSS 属性的值 - 该属性是

transform

。

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

Answer 2

我想我没有明白这个问题。

当我尝试更改 .burger-icon:before - 变换：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 更改转换的值，如下所示：

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

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

Answer 3

我知道这个问题已经有几年了，但我想做类似的事情：更改 X 的翻译而不改变 Y 的翻译。

因为如果你设置了transform:translateY(10px);然后在另一个CSS规则集下变换：translateX(35px);它将覆盖 Y 的翻译，并将其设置回 0。

我想出了一个技巧来做到这一点，但是使用CSS变量。 您可以做的是将翻译设置为两个变量的值，并根据需要更改变量的值。

#popup {
    --x:-50%;
    --y:-50%;
    
    transform:translate(var(--x), var(--y));
}
#popup.top {
    --y:--100%;
}
#popup.bottom {
    --y:0;
}
#popup.left {
    --x:-100%;
}
#popup.right {
    --x:0;
}