CSS3のtransform属性で実装される4つの機能

CSS3 では、transform 関数を使用して、テキストや画像の回転、拡大縮小、傾斜、移動という 4 種類の変形処理を実装できます。

1. ブラウザのサポート

現時点では、Safari 3.1 以上、Chrome 8 以上、Firefox 4 以上、Opera 10 以上のブラウザーがこのプロパティをサポートしています。

2. 回転

rotate メソッドを使用し、パラメータに角度の値を追加し、その後に角度の単位を示す「deg」という単語を追加します。回転方向は時計回りになります。

変換: 回転(45度);

3. ズーム

テキストまたは画像を拡大縮小するには、scale メソッドを使用し、パラメータで拡大縮小係数を指定します。

transform:scale(0.5); //半分に縮小

（１）要素の水平方向と垂直方向の拡大率を個別に指定できます。

transform:scale(0.5, 2); //水平方向に半分に縮小し、垂直方向に2倍に縮小します。

4. 傾ける

テキストや画像の傾斜処理を実装するには、skew メソッドを使用し、パラメータで水平方向の傾斜角度と垂直方向の傾斜角度を指定します。

transform:skew(30deg, 30deg); //水平方向に30度、垂直方向に30度傾けます。

（１）パラメータを１つだけ使用し、他のパラメータを省略する

この場合、傾きは水平方向のみであり、垂直方向ではないと考えられます。

変換:skew(30度);

5. モバイル

パラメータで水平方向と垂直方向の移動距離を指定して、テキストまたは画像を移動するには、translate メソッドを使用します。

transform: translate(50px, 50px); //水平方向に50px、垂直方向に50px移動

（１）パラメータを１つだけ使用し、他のパラメータを省略する

この場合、垂直方向ではなく水平方向にのみ移動すると考えられます。

変換: translate(50px);

6. 1つの要素に複数の変形方法を使用する

変換: 移動(150px, 200px) 回転(45度) スケール(1.5);

7.変形の基点を指定する

変換メソッドを使用してテキストまたは画像を変形する場合、変形は要素の中心点に基づいて実行されます。

transform-origin プロパティ

このプロパティを使用すると、変形の基点を変更できます。

変換: 回転(45度);
transform-origin:leftbottom; //参照点を要素の左下隅に変更します

（１）要素内の属性値参照点の水平位置を指定する：左、中央、右
要素内の参照点の垂直位置: 上、中央、下

8. 3D変形機能

（１）回転

rotateX メソッド、rotateY メソッド、rotateZ メソッドを使用して、それぞれ X 軸、Y 軸、Z 軸を中心に要素を回転させます。パラメータに角度の値を追加し、その後に角度の単位を表す単語 deg を追加します。回転方向は時計回りです。

変換: rotateX(45deg);
変換: rotateY(45deg);
変換: rotateZ(45deg);
変換: 回転X(45度)、回転Y(45度)、回転Z(45度);
変換: スケール(0.5)、Y軸回転(45度)、Z軸回転(45度);

（２）スケーリング

scaleX メソッド、scaleY メソッド、scaleZ メソッドを使用して、それぞれ X 軸、Y 軸、Z 軸に沿って要素をスケーリングし、パラメータでスケーリング比率を指定します。

変換: スケールX(0.5);
変換:スケールY(1);
変換:スケールZ(2);
変換: スケールX(0.5)スケールY(1);
変換: スケール(0.5) 回転Y(45度);

（３）傾き

skewXメソッドとskewYメソッドを使用して、それぞれX軸とY軸上で要素を時計回りに傾けます（skewZメソッドなし）。パラメータで傾斜角度を指定します。

変換: skewX(45deg);
変換:skewY(45度);

（4）モバイル

translateX メソッド、translateY メソッド、translateZ メソッドを使用して、それぞれ X 軸、Y 軸、Z 軸方向に要素を移動し、移動距離をパラメータに追加します。

変換: translateX(50px);
変換: translateY(50px);
変換: translateZ(50px);

9. 変形マトリックス

各変形方法の背後には、対応するマトリックスがあります。

（１）2次元変形を計算する（3X3行列）

\begin{bmatrix}a&c&e\\b&d&f\\0&0&1\end{bmatrix}

この 2D 変形行列は、matrim(a,b,c,d,e,f) と記述できます。ここで、a ～ f はそれぞれ、変形プロセスの実行方法を決定する数値を表します。

（２）２次元変換行列

\begin{bmatrix}1&0&tx\\0&1&ty\\0&0&1\end{bmatrix}
//同じ効果: 右に 150 ピクセル移動、下に 150 ピクセル移動
変換:行列(1, 0, 0, 1, 150, 150);
変換: translate(150px, 150px);

（３）３次元変形の計算

3Dスケーリングと変形に使用される4X4マトリックス

\begin{bmatrix}sx&0&0&0\\0&sy&0&0\\0&0&sz&0\\0&0&0&1\end{bmatrix}
変換:matrix3d(sx,0,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1);
// 効果は同じです。X 軸に沿って 5 分の 1 に縮小し、Y 軸に沿って半分に縮小します。
変換:scale3d(0.8,0.5,1);
変換:matrix3d(0.8,0,0,0,0,0.5,0,0,0,0,1,0,0,0,0,1);

（４）マトリックスを介して複数の変形処理を実行することができる

これは、必要な変形行列を乗算して新しい変形行列を取得することによって実現できます。

CSS3 の transform 属性で実装される 4 つの機能に関するこの記事はこれで終わりです。CSS3 の transform 属性の実装に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。