概要
CSSプロパティ｢transform-origin｣は、２Dまたは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座標は省略した場合は０pxが適用されます。以下は指定できる値の詳細です。
| 値 | 説明 |
|---|---|
| 長さ | 中心点の座標をpxやemなどで指定します。 |
| パーセント | 値は要素の幅、高さに対する割合 |
| left | 中心点のx座標を左端（0%）にします |
| right | 中心点のx座標を右端(100%)にします |
| top | 中心点のy座標を上端(100%)にします |
| bottom | 中心点のy座標を下端(100%)にします |
| center | x,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>