Css

CSSで複数の変換を適用する方法は？



How Apply Multiple Transforms Css



解決：

次のように1行に配置する必要があります。

li：nth-​​child（2）{変換：rotate（15deg）translate（-20px、0px）; }
複数の変換ディレクティブがある場合、最後のディレクティブのみが適用されます。他のCSSルールと同じです。

 
 
 
複数の変換1行ディレクティブは次のとおりであることに注意してください 右から左に適用 。
 
この：変換：scale（1,1.5）rotate（90deg）; 
と：変換：rotate（90deg）scale（1,1.5）;
 
 
 
意思 いいえ 同じ結果を生成します：
 
.orderOne、.orderTwo {font-family：sans-serif;フォントサイズ：22px;色：＃000;表示：インラインブロック; } .orderOne {変換：scale（1、1.5）rotate（90deg）; } .orderTwo {変換：rotate（90deg）scale（1、1.5）; }
A A 
私はこの答えを追加しているのは、それが役立つ可能性が高いからではなく、それが真実であるという理由だけです。
 
連鎖して複数の翻訳を作成する方法を説明する既存の回答を使用することに加えて、4x4マトリックスを自分で作成することもできます
 
 
 
グーグル中に見つけたランダムなサイトから次の画像を取得しました。これは回転行列を示しています。
 
x軸を中心とした回転：   
回転と軸：   
z軸を中心とした回転： 
 
私は翻訳の良い例を見つけることができなかったので、私がそれを正しく覚えている/理解していると仮定すると、翻訳：
 
[1 0 0 0] [0 1 0 0] [0 0 1 0] [x y z 1]
詳細については、変換に関するWikipediaの記事と、それをかなりよく説明しているPragamaticCSS3チュートリアルを参照してください。任意の回転行列を説明する私が見つけた別のガイドは、行列に関するEgonRathのメモです。
 
もちろん、行列の乗算はこれらの4x4行列間で機能するため、回転とそれに続く平行移動を実行するには、適切な回転行列を作成し、それを平行移動行列で乗算します。
 
これはあなたにそれを正しくするためのもう少し自由を与えることができます、そしてまたあなたを含めて誰もがそれが何をしているのかを5分で理解することをほとんど完全に不可能にします。
 
しかし、あなたが知っている、それは動作します。
 
編集：JavaScriptを介して複雑な3D変換を段階的に作成することである、これのおそらく最も重要で実用的な使用法について言及しなかったことに気づきました。
  
マークアップの追加レイヤーを使用して、複数の変換を適用することもできます。例：
 
 おい！ 
.rotated-heading {変換：rotate（10deg）; } .scaled-up {変換：scale（1.5）; }
これは、Javascriptを使用して変換を使用して要素をアニメーション化するときに非常に役立ちます。