CSS で複数の変換を適用するにはどうすればよいですか?

Question

CSS を使用して複数の transform を適用するにはどうすればよいですか?

例: 次の例では、回転ではなく平行移動のみが適用されます。

li:nth-child(2) {
    変換: 回転(15 度);
    変換: 変換(-20px,0px);
}

Answer 1

私がこの回答を追加したのは、役に立つかもしれないからではなく、それが真実だからです。

リンクを介して複数の翻訳を行う方法を説明する既存の回答を使用することに加えて、自分で 4x4 マトリックスを構築することもできます。 グーグルで見つけた

ランダムなサイトからの回転行列を示しました:

X 軸を中心に回転: Y 軸を中心に回転:

Z 軸を中心に回転:

適切な翻訳例が見つからなかったので、正しく覚えている/理解していると仮定すると、翻訳:
リーリー

変換に関する

Wikipedia の記事

を参照してください。また、

Pragamatic CSS3 チュートリアル ではこれについて非常に詳しく説明されています。任意の回転行列を説明するもう 1 つのガイドは、Egon Rath の行列に関するノート です。 もちろん、これらの 4x4 行列間では行列の乗算が可能であるため、回転と平行移動を実行するには、適切な回転行列を作成し、それに平行移動行列を乗算する必要があります。

これにより、より自由に正しく動作させることができ、また、5 分間はあなたを含め、誰にもその動作を理解することがほぼ完全に不可能になります。

しかし、ご存知のとおり、それは機能します。

編集: JavaScript を使用して複雑な 3D 変換を段階的に作成するという、おそらく最も重要で実用的な使い方を見逃していたことに今気づきました。その方がはるかに意味がありそうです。

Answer 2

次のように 1 行に入力する必要があります:

リーリー

複数の変換ディレクティブがある場合、最後のもののみが適用されます。他の CSS ルールと同様です。

---

1 行内の複数の変換は 右から左に適用されることに注意してください。 これ:

変換: スケール(1,1.5)回転(90度);

そして: 変換: 回転 (90 度) スケール (1,1.5);
を置き換えても

は同じ結果を生成しません:

リーリー リーリー