最終更新日 2021年6月20日

transformプロパティ

transformは、要素を変形させるプロパティです。

変形の種類には、マトリクス変形、移動、拡大、縮小、回転、傾斜などがあります。それらは、3Dで変形させることもできます。

2D変形は、X軸（水平）、Y軸（垂直）の2方向に要素を変形させます。

3D変形は、X軸（水平）、Y軸（垂直）、Z軸（奥行き）の3方向に要素を変形させます。

値には、変形関数を指定します。変形関数には「2D変形関数」と「3D変形関数」の2種類があります。

変形関数は、半角スペースで区切って複数指定することができます。この場合、最終的に要素に適用される効果は、それぞれの変形をミックスしたものです。

CSS3での変更点

・transformは、CSS3から新しく追加されたプロパティです。

初期値	適用先	継承
none	ブロックレベル要素、インラインレベル要素	なし

値	説明
none	要素を変形させない。（初期値）

2D変形関数
matrix(X軸方向への拡大縮小率, Y軸方向への傾斜角度, X軸方向への傾斜角度, Y軸方向への拡大縮小率, X軸方向への移動距離, Y軸方向への移動距離)
translate(X軸方向への移動距離, Y軸方向への移動距離)
translateX(X軸方向への移動距離)
translateY(Y軸方向への移動距離)
scale(X軸方向への拡大縮小率, Y軸方向への拡大縮小率)
scaleX(X軸方向への拡大縮小率)
scaleY(Y軸方向への拡大縮小率)
rotate(角度)
skewX(X軸方向への傾斜角度)
skewY(Y軸方向への傾斜角度)

3D変形関数
matrix3d(数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値)
translate3d(X軸方向への移動距離, Y軸方向への移動距離, Z軸方向への移動距離)
translateZ(Z軸方向への移動距離)
scale3d(X軸方向への拡大縮小率, Y軸方向への拡大縮小率, Z軸方向への拡大縮小率)
scaleZ(Z軸方向への拡大縮小率)
rotate3d(X軸の方向ベクトル数値, Y軸の方向ベクトル数値, Z軸の方向ベクトル数値, 回転の角度)
rotateX(角度)
rotateY(角度)
rotateZ(角度)
perspective(ピクセル値)

サンプルコード

/* 2D変形 */
transform: translate(100px, 50px) rotate(45deg);
transform: skewX(15deg) skewY(15deg);

/* 3D変形 */
transform: translate3d(100px, 50px, 20px) rotateX(45deg);
transform: perspective(200) rotateY(25deg);

参考文献：CSS Transforms

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。