transform: translateX wirkt sich transform: translateY

Question

Ich versuche, ein Burger-Menü zu animieren. Wenn ich versuche, die X-Koordinate in .burger-icon:before - transform: translateX(20px) zu ändern - ändert sich auch das Y. Vielen Dank!

Hier HTML:

<button class="menu-button" type="button" data-toggle="-menu" id="burger-button"> 
    <span class="burger-icon"></span> 
</button> 

Hier mein CSS ist:

.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

Wenn ich versuche, die X zu ändern, in .burger-icon-Koordinate: vor - transform: translateX(20px) - es ist das ändert Ich auch.

meinen Sie, wenn Sie nurtransform: translateY(10px) angeben?

Nun ja natürlich tut es.

Sie ändern den Wert von eine einzige CSS-Eigenschaft nur hier - und diese Eigenschaft ist transform.

Wenn Sie keine expliziten Werte für die verschiedenen Transformationsfunktionen angeben, nehmen diese ihre Standardwerte an.

Answer 2

Ich glaube nicht, dass ich die Frage bekomme.

Wenn ich versuche, die X-Koordinate in .burger-icon zu ändern: before - transform: translateX (20px) - ändert sich auch das Y.

Und in Ihrem Code Sie haben:

.burger-icon:before { 
    transform: translateX(20px) **translateY(10px)** rotate(-45deg); 
} 

Was versuchen Sie zu sagen? Dass, wenn Sie diesen Code ändern für:

.burger-icon:before { 
    transform: translateX(35px) translateY(10px) rotate(-45deg); 
} 

die y-Koordinate hat algo ändern? Weil das komisch wäre. Aber wenn Sie es ändern sich:

.burger-icon:before { 
    transform: translateX(35px); 
} 

es ist normal, da Sie die translateY eliminiert verwandeln, so geht es zurück auf den Standardwert (0).

---

ich hier nur bin zu raten:

Vielleicht wie so Sie versuchen, den Wert der Transformation über JavaScript zu ändern:

in diesem Fall ist es

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

Gut ist, als ob Sie legen den Wert der Transformationseigenschaft auf "translateX (35px)" fest, also haben wir dieselbe Situation wie die oben beschriebene.