CSS変換を複数の場所に設定する

Question

スタイルtransform: translateX(100px) translateY(200px) rotate(100deg) scale(1.5)を複数の場所に設定する方法はありますか？

.translate-x { 
    transform: translateX(100px); 
} 

.translate-y { 
    transform: translateY(200px); 
} 

.rotate { 
    transform: rotate(100deg) 
} 

.big { 
    transform: scale(1.5); 
} 

そして、私はtransformを組み合わせることがHTMLでこれらのクラスを使用したいと思います：たとえば、CSSに次の行があります。

<div class="translate-x rotate big"></div> 
<div class="translate-y big"></div> 
... 

問題は、スタイルが結合されないことですが、最後のスタイルは上書きされます。

私が知っている唯一の方法は、すべてのクラスを組み合わせることです。しかし、多くの組み合わせがあります...

.translate-x.translate-y { 
    transform: translateX(100px) translateY(200px); 
} 

.translate-x.translate.y.big { 
    transform: translateX(100px) translateY(200px) scale(1.5); 
} 

... 

Answer 1

残念ながら、あなたはできません。次のようにtransformのための構文は、あなたのHTML要素に複数のクラスを呼び出すとき

transform: none|transform-functions|initial|inherit; 

だから、あなたのCSSで宣言された唯一の最後のclassが適用されています。 （classはHTMLでは問題ありません）

あなたができることは、これらの変換関数の文字列を1つの宣言で生成してオーバーライドしないようにする関数でCSSプリプロセッサを使用することです。

Answer 2

上記の答えは、現在、これは孤独なCSSによって不可能であると述べています。それを適用するにはjavascriptを使用する必要があります。ここで

が

$('.my-element').css({ 
'transform': 'translateX(100px) translateY(200px) rotate(100deg) scale(1.5)' 
}); 

小さなjQueryの一例であるバニラJSの方法は以下の通りです：

var myElement = document.getElementsByClassName('my-element'); 
myElement.style.transform = 'translateX(100px) translateY(200px) rotate(100deg) scale(1.5)'; 

あなたはどちらか適用するには、次の3つのメソッドを使用することができるはずです。

1. イベントリスナー（できればイベントデリゲーションあり）
2. Funオブジェクトの末尾にスクリプトを挿入するだけで、グリッチを防ぐために要素が変形される前にレンダリングされるようにするだけです。