当我尝试在.burger-icon：before -transform: translateX(20px)中更改X坐标时，它也会更改Y坐标。
你的意思是当你指定 onlytransform: translateY(10px)时？
是啊，当然有关系。
你在这里只改变了一个CSS属性的值，这个属性就是transform。
如果您没有为不同的转换函数指定显式值，那么这些转换函数将采用其默认值。

我想我没听懂你的问题。
当我尝试在.burger-icon：before - transform中更改X坐标时：X轴（20 px）-它也改变了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)";

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

我知道这个问题已经有几年了，但我想做一些类似的事情：改变X的平移而不改变Y的平移。
因为如果你设置transform：pixel（px）;然后在另一个CSS规则集转换下：px（px）;它将覆盖Y的平移，并将其设置回0。
我想出了一个技巧来做到这一点，但使用CSS variables。你可以做的是将转换设置为两个变量的值，并根据需要更改变量的值。

#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;
}