transform：translateX正在影响转换：translateY

我正在尝试为汉堡菜单设置动画。当我尝试更改.burger-icon:before - transform: translateX(20px)中的X坐标时 - 它也会更改Y.谢谢！transform：translateX正在影响转换：translateY

这里是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); 
}

来源

2017-03-02 ezsayag

当我尝试改变.burger图标X坐标：前 - transform: translateX(20px) - 它改变了Y也是。

你的意思是，当你指定只transform: translateY(10px)？

嗯，当然是的。

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

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

来源

2017-03-02 16:02:16 CBroe

我不认为我得到的问题。

当我尝试更改.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）”，所以我们与上面解释的情况具有相同的情况。

来源

2017-03-02 17:10:19

transform：translateX正在影响转换：translateY

回答

相关问题