transform
text-transform は拡大、縮小、回転、傾斜、移動といった変形を指定します。
- 値
- none, transform 関数
- 初期値
- none
- 対象
- 変形可能要素
- 継承
- しない
- CSS レベル
- CSS 3（CSS Transforms Module Level 1）～
値の詳細
2D 変形
- none
- 変形しない
- translate(x, y)
- x, y で指定した数値の分要素を移動
例：translate(15px, 30px) - translateX(x)
- x で指定した数値分右または左に移動
- translateY(y)
- y で指定した数値分右または左に移動
- scale(x, y)
- x, y で指定した数値分要素を拡大または縮小
- scaleX(x)
- x で指定した数値分要素を横方向に拡大または縮小
- scale(y)
- y で指定した数値分要素を縦方向に拡大または縮小
- rotate(x)
- xで指定した数値分要素を回転
例：rotate(30deg) - skew(x, y)
- x, y で指定した数値分要素を左右上下に傾ける
例：skew(15deg, 30deg) - skewX(x)
- x で指定した数値分要素を左右に傾ける
- skewY(y)
- y で指定した数値分要素を上下に傾ける
3D 変形
- translateZ(z)
- z で指定した数値分要素をZ軸方向に移動
- translate3d(x, y, z)
- x, y, z で指定した数値分要素をX, Y, Z軸方向に移動
例：translate3d(50px, 50px, 50px) - scaleZ(z)
- z で指定した数値分要素をZ軸方向に拡大または縮小
- rotateX(r)
rotateY(r)
rotateZ(r) - r で指定した数値分要素をそれぞれX, Y, Z軸方向に回転
- rotate3d(x, y, z, r)
- 原点 (0, 0, 0) と (x, y, z) を結ぶ直線を軸として r で指定した数値分要素を回転
x, y, z には長さ、 r には角度を表す値を指定
例：rotate3d(5, 5, 5, 45deg) - perspective(l)
- 変形後の要素を透視図法で描画。l で指定した数値が消失点からの距離になります
例：perspective(100px)