CSS3 2D変換2024 年の最新の入門チュートリアル。このコースでは CSS3の変換,それがどのように動作しますか?,ブラウザのサポート,2D変換,例,翻訳()メソッド,例,()メソッドを回転させます,例,スケール()メソッド,例,スキュー()メソッド,例,行列()メソッド,例,新しい変換プロパティ,2D変換の方法, について学習できます。
CSS3の遷移は、我々は、順番に、回転及びストレッチ要素、スケーリング、移動させることができます。
変換の効果は、要素の形状、大きさ及び位置を変更するようになっています。
あなたは、2Dまたは3Dの要素を変換することができます。
表中の数字は、プロパティのバージョン番号をサポートする最初のブラウザを表します。
すぐにデジタル-webkit-を以下、-ms-またはプレフィックスのサポートに前-moz-は最初のブラウザのバージョン番号を属性。
属性 | |||||
---|---|---|---|---|---|
transform | 36.0 4.0 -webkit- |
10.0 9.0 -ms- |
16.0 3.5 -moz- |
3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- |
transform-origin (two-value syntax) |
36.0 4.0 -webkit- |
10.0 9.0 -ms- |
16.0 3.5 -moz- |
3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- |
Internet Explorerの10は、Firefox、およびOperaはtransformプロパティをサポートしています。
ChromeとSafariは接頭辞-webkit-バージョンが必要です。
注:Internet Explorer 9のは、接頭辞-ms-バージョンが必要です。
この章では、2D変換方法を学びます。
次の章では、3D変換を学習します。
翻訳()メソッドは、左(X軸)と指定されたパラメータの最上部(Y軸)位置に応じて、要素の現在の位置から移動します。
値(は50px、100pxに)を変換、左から50ピクセルのモバイル要素であり、上から100ピクセルを移動しました。
要素の時計回りの回転中度の与えられた数で、()メソッドを回転させます。 負の値が許容され、これは、要素の反時計回りの回転です。
値を回転(30度)の要素が時計回りに30度回転しました。
幅(X軸方向)及び高さ(Y軸)のパラメータに応じて、増加または要素のサイズを小さくスケール()メソッド:
スケール(2,3)遷移幅は、元のサイズの2倍、および元の高さの3倍の大きさです。
スキュー()メソッド、与えられた角度のための横方向(X軸)と垂直(Y軸)ラインパラメータに従って要素:
(30度、20deg)スキューは、X軸とY軸は約20度、約30度の要素です。
マトリックス()メソッドと、2D変換の方法は、1つに統合しました。
マトリックス法は、回転、拡大縮小、移動(パン)とチルト機能を含む6つのパラメータを有しています。
マトリックスの使用()div要素に30°を回転させる方法
すべての変換プロパティーのリストは、次のとおりです。
プロパティ | 説明 | CSS |
---|---|---|
変換 | 2Dまたは3D変換素子を適用します | 3 |
変換原点 | それはあなたが変換素子の位置を変更することができます | 3 |
関数 | 説明 |
---|---|
行列(N、N、N、N、N、N) | 6つの値の行列を使用して、2D変換を定義します。 |
(x、y)の変換 | 2D変換は、X及びY軸移動要素に沿って定義されます。 |
移動X(n)は | X軸に沿った2次元の変換素子を定義します。 |
移動Y(n)は | 2D変換は、Y軸移動要素に沿って定義されます。 |
スケール(x、y)の | 2Dスケール変換を定義し、要素の幅と高さを変更します。 |
scaleXプロパティ(N) | 2Dスケール変換を定義し、要素の幅を変更します。 |
scaleYの(N) | 要素の高さを変更、2Dスケール変換を定義します。 |
(角度)を回転させます | 2Dは引数に所定の角度を回転定義します。 |
スキュー(X-角、y軸の角度) | X軸とY軸に沿って2Dスキュー変換を定義します。 |
skewX値(角度) | 2Dスキュー変換は、X軸に沿って定義されます。 |
skewY(角度) | Y軸に沿って定義2Dスキュー変換。 |