transform-origin
transform-origin は要素を変形する際の原点を指定します。
値は x, y, z の順に指定します。
transform-origin: x, y, z;
- x = X方向の原点
- y = Y方向の原点
- z = Z方向の原点
値を一つだけ指定した場合は2つ目の値に “center” 3つ目の値に “0px” を指定したものと同等になり、値を2つ指定した場合は3つ目に “0px” を指定したものと同等になります。
- 値
- 数値, left, senter, right, top, bottom
- 初期値
- 50%, 50%, 0
- 対象
- 変形可能要素
- 継承
- しない
- CSS レベル
- CSS 3（CSS Transforms Level 1）～
値の詳細
- 数値
- %, px 等を指定
- left
- X方向 0% と同等
- center
- X, Y 方向とも 50％ と同等
- right
- X方向 100% と同等
- top
- Y方向 0 % と同等
- bottom
- Y方向 100% と同等
サンプル
div {
transform-origin: 50px 50px;
}