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

回答

相關問題