トランスフォーム：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

私はXが.burger-アイコンの座標変更しようとすると：前 - それは変わる - transform: translateX(20px) Yも同様です。

あなたはだけtransform: translateY(10px)を指定するときは、意味ですか？

もちろんそうです。

の値を変更しています。ここにはCSSプロパティが1つあります。そのプロパティはtransformです。

異なる変換関数に明示的な値を指定しない場合、それらはデフォルト値をとります。

Answer 2

私は質問をするとは思わない。

.burger-iconのbefore-transform：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）"に設定するので、上で説明したのと同じ状況になります。