[css3]css3におけるtransformプロパティの4つの機能

2022-01-21 09:54:22

CSS3では、テキストや画像の回転、拡大縮小、傾き、移動の4種類の変形を行うことができます。

1. ブラウザ対応

今のところ Safari 3.1+, Chrome 8+, Firefox 4+, Opera 10+のブラウザがこの属性をサポートしています。　　

2. 回転させる

rotateメソッドを使い、パラメータに角度値を、その後に角度単位を表す"deg"テキストを追加して、時計回りに回転させます。

transform: rotate (45deg).

3. スケーリング

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

transform: scale (0.5); //scale by half

(1) 要素の横倍率と縦倍率を別々に指定することができる

transform: scale (0.5, 2); // Half the size horizontally and double the size vertically.

4. チルト

テキストや画像の傾きを調整するには、skewメソッドを使用します。パラメータに水平方向の傾きと垂直方向の傾きをそれぞれ指定します。

transform: skew (30deg, 30deg); // Tilt 30 degrees horizontally and 30 degrees vertically.

(1) 1つのパラメータのみを使用し、他のパラメータを省略する。

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

transform: skew (30deg).

5.移動

テキストや画像を移動させるには、translateメソッドを使用します。パラメータに水平方向に移動する距離と垂直方向に移動する距離をそれぞれ指定します。

transform: translate(50px, 50px); // move 50px horizontally and 50px vertically

(1) 1つのパラメータのみを使用し、他のパラメータを省略する。

この場合、縦方向には動かず、横方向にのみ動くと考えられます。

transform: translate (50px).

6. 要素に複数の変換を使用する　　

transform: translate (150px, 200px) rotate (45deg) scale (1.5).

7. 変換の基準点を指定する

transformメソッドでテキストや画像を変換する場合、要素の中心点を変換の基準点として使用します。

transform-originプロパティ

このプロパティは、変換の基準点を変更するために使用します。

transform: rotate (45deg).
transform-origin: leftbottom; // Modify the reference point to the bottom left corner of the element

(1) 属性値を指定する
要素の水平方向における基点の位置：左、中央、右
要素上の基準点の垂直方向の位置：top, center, bottom

8. 3次元変形機能

(1) 回転

rotateX、rotateY、rotateZメソッドを使用して、それぞれX軸、Y軸、Z軸の周りに要素を回転させ、引数に角度値を追加し、その後に角度単位を示すdegテキストを追加します。

transform: rotateX (45deg).
transform: rotateY (45deg).
transform: rotateZ (45deg).
transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg).
transform: scale(0.5) rotateY(45deg) rotateZ(45deg).

(2) スケーリング

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

transform: scaleX (0.5).
transform: scaleY (1).
transform: scaleZ (2).
transform: scaleX(0.5) scaleY(1).
transform: scale(0.5) rotateY (45deg).

(3) チルト

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

transform: skewX (45deg).
transform: skewY (45deg).

(4) 移動

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

transform: translateX(50px);
transform:translateY(50px);
transform:translateZ(50px);

9. 変換行列

各変形方法の背景には、対応する行列が存在する。

(1) 2次元変形の計算（3X3行列）

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

この2次元変形行列を、a~fをすべて数値で表したmatrim(a,b,c,d,e,f)と書くと、変形処理をどのように行うかがわかります。

(2) 並進のための2次元マトリックス

\begin{bmatrix}1&0&tx\\0&1&typ\\0&0&1\end{bmatrix}
// the effect is the same: shift right 150px, shift down 150px
transform:matrix(1,0,0,1,150,150).
transform: translate(150px, 150px).

(3) 3次元変形の計算

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

\begin{bmatrix}sx&0&0&0\\0&sy&0&0\0&0\\0&0&sz&0\\\0&0&0&1\end{bmatrix}
transform:matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,1);
// The effect is the same: the X-axis is scaled by one-fifth, and the Y-axis is scaled by half.
transform:scale3d(0.8,0.5,1);
transform:matrix3d(0.8,0,0,0,0,0,0,0.5,0,0,0,0,0,1,0,0,0,0,1);

(4) 複数の変形をマトリックスで行うことができる

これは、目的の変形行列を乗算して新しい変形行列を得ることで実現できる。

以上で、css3のtransformの4つの機能についての説明を終わります。css3のtransformについてもっと詳しく知りたい方は、スクリプトハウスの過去記事を検索するか、以下の記事を引き続き閲覧してください。