IT Memo >>> CSS >>> 【CSS】「transform」プロパティ - コンテンツに「2D変形」「3D変形」を適用する方法

【CSS】「transform」プロパティ - コンテンツに「2D変形」「3D変形」を適用する方法

【CSS】
「transform」プロパティ
コンテンツに「2D変形」「3D変形」を適用する方法

「transform」プロパティは、
「画像」「文字」などのコンテンツを変形させる時に使用する。

「transform」プロパティの値入力位置に、
「transform」関数をしていすることで、
「2D変形」「3D変形」「移動」「縮尺」「回転」「傾斜」「遠近効果」などの効果をコンテンツに適用できる。
書式もシンプルで、指定しやすい。

画像を斜めに角度を付けて表示する際には、
「transform」プロパティの「translate」関数がよく利用される。

INDEX

■ 「transform」プロパティとは
■ 「transform」プロパティの書式

■ 「transform関数」の種類

■ 「2D変形」効果のtransform関数「matrix」
■ 「3D変形」効果のtransform関数「matrix3d」
■ 「移動」効果のtransform関数「translate」
■ 「縮尺」効果のtransform関数「scale」
■ 「回転」効果のtransform関数「rotate」
■ 「傾斜」効果のtransform関数「skew」
■ 「遠近効果」のtransform関数「perspective」

「transform」プロパティとは

「transform」プロパティは、
コンテンツ（要素）に、「2D変形」「3D変形」を適用することができる「CSSプロパティ」の一つ。

「transform」プロパティに用意されている値の中に、「関数」があり、その「関数」を指定し、値を設定することで、
コンテンツ（要素）に、
「マトリクス変形」「移動」「縮尺」「回転」「傾斜」などの変形を加えることができる。
画像に回転を加えて表示するのに、よく使われる。

「transform関数」は、「スペース」で区切ることで、「複数指定」が可能。
複数の「transform」効果を同時に加えることも可能になっています。

Back

「transform」プロパティの書式

「transform」プロパティを指定する書式は、
シンプルで、「transform」プロパティの値の場所に、「transform」関数と値を記述します。

複数の「transform」関数を指定する時は、
「transform」関数の間に「半角スペース」を加え、区切り文字として使用します。

transform: transform関数名(値);
transform: transform関数名(値) transform関数名(値);

transform: rotate(5deg);

Back

「transform関数」の種類

「transform」プロパティで利用できる「transform」関数は、
複数あり、同時に複数指定も可能です。
角度の指定に使う単位は、「deg」が使われます。

「2D変形」効果のtransform関数「matrix」

matrix(数値, 数値, 数値);

「3D変形」効果のtransform関数「matrix3d」

matrix3d(数値, 数値, 数値, 数値, 数値, 数値, 数値);

「移動」効果のtransform関数「translate」

コンテンツを移動させるためのtransform関数。
通常の配置位置から移動させることができる。

translate(X方向の移動距離, Y方向の移動距離)
translateX(X方向の移動距離)
translateY(Y方向の移動距離)
translateZ(Z方向の移動距離)
translate3d(X方向の移動距離, Y方向の移動距離, Z方向の移動距離)

「縮尺」効果のtransform関数「scale」

通常のコンテンツサイズから、サイズ変更をすることができるtransform関数。

scale(X方向の縮尺比率, Y方向の縮尺比率)
scaleX(X方向の縮尺比率)
scaleY(Y方向の縮尺比率)
scaleZ(Z方向の縮尺比率)
scale3d(X方向の縮尺比率, Y方向の縮尺比率, Z方向の縮尺比率)

「回転」効果のtransform関数「rotate」

コンテンツを回転させることができるtransform関数。
画像や文字を斜めに表示したい時などに使用する。

rotate(回転角度)
rotate3d(数値, 数値, 数値, 回転角度)
rotateX(X軸を軸とする回転角度)
rotateY(Y軸を軸とする回転角度)
rotateZ(Z軸を軸とする回転角度)

rotate(5deg);

「傾斜」効果のtransform関数「skew」

skew(X軸の傾斜角度, Y軸の傾斜角度)
skewX(X軸の傾斜角度)
skewY(Y軸の傾斜角度)

「遠近効果」のtransform関数「perspective」

perspective(数値)

Back