CSSリファレンス

実践向けCSSリファレンス

変形におけるx, y, z座標の基準点を設定する transform-origin

概要

CSSプロパティ「transform-origin」は、2Dまたは3D要素が変形する際の基点を指定することができます。

<div class="box">指定なし</div>
<div class="box transform">transform指定</div>
<div class="box transform origin">transform-origin指定</div>
<style>
div {
  margin-bottom: 10px;
}
p {
  font-size: 12px;
}
.box {
  width: 200px;
  height: 50px;
  background-color: #eee;
}
.transform {
  transform: rotate(-10deg);
}
.origin {
  background-color: #def;
  transform-origin: top right;
}
</style>

上記の例のような transform プロパティの「rotate()」関数はこのプロパティを中心に回転しています。

取りうる値

{ transform-origin: x値, y値, z値; }

初期値は、2D変形では50% 50%、3D変形では50% 50% 0が指定されています。またz座標は省略した場合は0pxが適用されます。以下は指定できる値の詳細です。

説明
長さ 中心点の座標をpxやemなどで指定します。
パーセント値は要素の幅、高さに対する割合
left中心点のx座標を左端(0%)にします
right中心点のx座標を右端(100%)にします
top中心点のy座標を上端(100%)にします
bottom中心点のy座標を下端(100%)にします
centerx,y座標を中心(0%)にします

使用例

<p>rotate関数指定</p>
<div class="box transform-rotate"></div>
<p>rotae関数、 右上を起点に回転</p>
<div class="box origin transform-rotate top-right"></div>

<p>scale関数指定</p>
<div class="box transform-scale"></div>
<p>scale関数、 左上を起点に拡大</p>
<div class="box origin transform-scale top-left"></div>
<style>
div {
  margin-bottom: 10px;
}
p {
  font-size: 12px;
}
.box {
  width: 50px;
  height: 50px;
  background-color: #eee;
}
.origin {
  background-color: #def;  
}
.transform-rotate {
  transform: rotate(-45deg);
}
.transform-scale {
  transform: scale(2, 1.2);
}
.top-right {
 transform-origin: top right;
}
.top-left {
  transform-origin: top left;
}
</style>

仕様書

関連CSSプロパティ

閉じる