CSS transform-origin の使い方｜回転・拡大の基点の指定方法

編集

この記事の要点

transform-origin は transform の変形基点を指定する CSS プロパティ
既定値は要素の中心（50% 50%）。左上にしたければ top left / 0 0
回転・拡大・スキューはすべてこの基点を中心に行われる
値はキーワード（top / right / center / left / bottom）、%、長さ単位を組み合わせ
3D 変形では 3 つ目の値 z を指定でき、Z 軸方向の基点も制御可能

transform-origin とは

transform-origin は transform による回転 / 拡大 / 移動 / スキューを行うときの基点（中心点）を指定する CSS プロパティです。同じ rotate(45deg) でも、基点が中央なのか左上なのかで結果が大きく異なります。

基本構文

セレクタ {
  transform-origin: 水平 [垂直 [奥行き]];
}

/* 例 */
.box1 { transform-origin: center; }       /* = 50% 50% */
.box2 { transform-origin: top left; }     /* = 0 0 */
.box3 { transform-origin: 100% 50%; }     /* 右辺の中央 */
.box4 { transform-origin: 50% 50% 100px; } /* 3D 用、Z=100px */

指定できる値

水平	意味	垂直	意味
`left`	0%	`top`	0%
`center`	50%（既定）	`center`	50%（既定）
`right`	100%	`bottom`	100%
`20%`	要素幅の 20%	`20%`	要素高さの 20%
`30px`	要素の左端から 30px	`30px`	要素の上端から 30px

1 個だけ書くと水平方向。2 個書くと「水平垂直」、3 個書くと「水平垂直奥行き（z）」になります。

視覚的に違いを見る（回転）

同じ rotate(30deg) でも基点で結果は全く違います。

.center-pivot { transform-origin: center; transform: rotate(30deg); }
.tl-pivot     { transform-origin: top left; transform: rotate(30deg); }
.tr-pivot     { transform-origin: top right; transform: rotate(30deg); }
.bottom-pivot { transform-origin: center bottom; transform: rotate(30deg); }

center: その場で回転（その点はピン留め）
top left: 左上の角を軸にカーペットめくり
top right: 右上の角を軸に
center bottom: 下辺の中心軸（振り子の上の支点のような感じ）

scale の基点

拡大縮小も基点に向かって（または基点から外へ）動きます。

/* 中央から拡大 */
.zoom-c { transform-origin: center; transform: scale(1.2); }

/* 左下から拡大（看板を立てかけるような動き） */
.zoom-bl { transform-origin: left bottom; transform: scale(1.5); }

キーワード × % × 数値の混在

位置は自由に混ぜられます。

.a { transform-origin: right top; }      /* 右上 */
.b { transform-origin: 25% 75%; }        /* 左寄り下 */
.c { transform-origin: 10px 20px; }      /* 要素の (10px, 20px) */
.d { transform-origin: left 30%; }       /* 水平左 + 垂直 30% */

負の値も可

負の値や 100% を超える値も指定でき、要素の外側を基点にできます。「離れた位置を軸に回転する」演出に便利。

/* 要素の左 100px 上 を中心に回転（観覧車のようなアニメ） */
.swing {
  transform-origin: -100px -100px;
  transform: rotate(45deg);
}

3D 変形と Z 軸

3 つ目の値で Z 軸方向の基点を指定できます。perspective と組み合わせると、回転軸を画面手前/奥にずらした立体的な動きが作れます。

.scene { perspective: 800px; }

.card {
  transform-origin: 50% 50% 50px;       /* 軸を 50px 手前に */
  transform: rotateY(30deg);
}

典型例: ホバーで上から開く扉

.door {
  transform-origin: top center;
  transition: transform 0.4s;
}
.door:hover {
  transform: rotateX(-80deg);
}

典型例: 端からシャッターのように開く

.panel {
  transform-origin: left center;
  transition: transform 0.4s;
}
.panel.is-open {
  transform: scaleX(0);  /* 左端から閉じる */
}

typical animation: ピンを軸に振り子

@keyframes swing {
  0%   { transform: rotate(-15deg); }
  100% { transform: rotate(15deg); }
}

.pendulum {
  transform-origin: center top;
  animation: swing 1.2s ease-in-out infinite alternate;
}

SVG での transform-origin

SVG 要素にも CSS の transform-origin を適用できますが、ブラウザによってはユーザー単位として解釈されることがあるため、座標値（cx cy）を明示する方が安定します。

.svg-rect {
  transform-origin: 50px 50px;  /* SVG 座標 */
  transform: rotate(30deg);
}

初期値と継承

項目	値
初期値	`50% 50% 0`
継承	なし
アニメーション	可

よくあるトラブル

症状	原因 / 対処
回転が想定と違う	transform-origin が中央のまま。基点を変えるか、transform を組み合わせる
scale で要素が飛ぶ	基点を要素端にしている。中央にすれば中心拡大
3D が効かない	祖先要素に `perspective` を設定する
SVG で座標が変	SVG はユーザー単位で解釈する場合があるので、CSS よりも transform 属性で `transform="rotate(30 50 50)"` 指定が安定

FAQ

Q: 回転と移動を同時にやるとき基点はどこ？
A: transform: translate(100px) rotate(30deg) のように書くと、まず translate が適用された後の要素の transform-origin を中心に回転します。順序が逆だと結果が変わります。

Q: アニメーション中に transform-origin を変えると？
A: 補間されますが、ジャンプして見えることが多いのでアニメ開始前に固定するのが安全です。

Q: GPU アクセラレーションへの影響は？
A: transform 系はレイヤー化されやすく GPU で処理されます。will-change: transform を併用するとさらに最適化される場合があります。

ページ一覧

その他