CSS ・ アニメーション
transform-origin
変形の基点
transform で回転・拡大縮小・傾斜させるときの基点（どこを中心に動かすか）を変えます。初期値は要素の中央です。
01
サンプルコード
HTML
1<div class="row">
2 <div class="box center">中央</div>
3 <div class="box left-top">左上</div>
4</div>
CSS
1.row {
2 display: flex;
3 gap: 60px;
4 padding: 30px 40px;
5}
6.box {
7 width: 80px;
8 height: 80px;
9 display: grid;
10 place-items: center;
11 background: #b68235;
12 color: #fff;
13 font-size: 13px;
14 transform: rotate(20deg);
15}
16/* 初期値（書かなくても同じ） */
17.center {
18 transform-origin: center;
19}
20/* 左上を基点に回す */
21.left-top {
22 transform-origin: left top;
23}
02
実行結果
ブラウザでの表示どちらも rotate(20deg) ですが、基点が違うので回ったあとの位置が変わります
03
解説
transform-origin は、transform で動かすときの 基点（動きの中心）を変更する プロパティです。何も書かないと要素の中央が基点になります。
書き方は transform-origin: X軸の基点 Y軸の基点 Z軸の基点; です。X と Y には left / center / right、top / center / bottom などのキーワードか、%・px を書きます。Z は 3D のときだけ使い、px で指定します。
回転（rotate）・拡大縮小（scale）・傾斜（skew）の見た目が変わります。移動（translate）は基点に関係なく同じ距離だけ動きます。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
center | 中央（初期値。50% 50% と同じ） |
left top | 左上（0 0 と同じ） |
right bottom | 右下（100% 100% と同じ） |
50% 100% | 下の辺の真ん中 |
0 0 -50px | Z軸の基点も指定する（3Dのとき） |
左から右へ線が伸びる下線
transform-origin: left を指定すると、scaleX が左端から伸びます。指定しないと中央から左右に伸びます。
HTML
1<a class="link" href="#">マウスを乗せてください</a>
CSS
1.link {
2 position: relative;
3 color: #7d5411;
4 text-decoration: none;
5}
6.link::after {
7 content: "";
8 position: absolute;
9 left: 0;
10 bottom: -4px;
11 width: 100%;
12 height: 2px;
13 background: #b68235;
14 transform: scaleX(0);
15 transform-origin: left;
16 transition: transform .3s ease;
17}
18.link:hover::after {
19 transform: scaleX(1);
20}
注意点
- 01transform-origin だけを書いても要素は動きません。transform と一緒に使います。
- 02ホバー時（:hover）ではなく、元の状態のセレクタに書いておくと、戻るときも同じ基点で動きます。