変形
transform-origin
transform-origin は、回転や拡大・縮小の中心になる点を指定します。初期値は要素の中央です。
構文
[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] <length>? | [ [ center | left | right ] && [ center | top | bottom ] ] <length>?プレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
background: linear-gradient(
135deg,
#88d1c7,
#77a7d7,
#eaac3a
);
border-radius: 8px 32px;
transform: rotate(30deg) scale(0.6);
transform-origin: left top;
}コントロール
四角の中をクリック・ドラッグして中心を動かせます
横の位置
縦の位置
解説
値の書き方
横、縦の順に位置を書きます（transform-origin: left top）。キーワード（left・center・right・top・bottom）、長さ、% が使えます。% は要素自身の幅・高さに対する割合で、0 0 が左上、100% 100% が右下です。初期値は 50% 50%（中央）です。
- 1 つだけ書くと、もう一方は
centerになります。topだけなら上の辺の中央です。 - キーワード 2 つなら順不同で、
top leftとも書けます。 150%のように、箱の外の点も中心にできます。
3 つ目に奥行き（z）の位置も書けますが、3D の変形と組み合わせないと見た目は変わりません。このページのコントロールでは扱っていませんが、コードには書けます。
何の中心になるか
rotate・scale と、transform の rotate()・scale()・skew() の中心になります。中心の点は動かず、ほかの部分がその点のまわりで回ったり、その点に向かって縮んだりします。動かすだけの translate には影響しません。
このページのプレビューは、補助の宣言で transform: rotate(30deg) scale(0.6) を書いています。点線の枠が元の位置で、transform-origin に選んだ点だけが、元の位置から動きません。