transform-origin

transform-originプロパティはtransformプロパティで行う自由変形の起点の位置を指定できるプロパティです。

transformプロパティで行う自由変形は通常ページの中央(50% 50%)を起点に行なわれますが、transform-originにより起点を任意の位置に変更できます。

.target{
	transform:rotate(45deg);
	transform-origin: 0 0;
}

起点はpxやem、%などの単位の他に、left(0%)、center(50%)、right(100%)、top(0%)、bottom(100%)といったキーワードが利用できます。

引数が一つの場合はX軸方向の位置を、引数が2つの場合はX軸方向とY軸方向の位置を、さらに、引数が3つの場合はX軸方向とY軸方向、Z軸方向の位置を指定できます。

.target{
	transform-origin: 0;/*0 50% 50%*/
	transform-origin: 0 0;/*0 0 50%*/
	transform-origin: 0 0 0;/*0 0 0*/
}

transform-originプロパティは一部のブラウザでは「-webkit-」や「-ms-」といったベンダープレフィックスを利用して実装されているので、ベンダープレフィックスを付けた記述も追加することでより多くのブラウザをサポートできるでしょう。

.target{
	width:100px;
	height:100px;
	background:red;
	margin-bottom:100px;
	-webkit-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg);
	-webkit-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	transform-origin: 0 0;
}

sample

対応ブラウザ

IE	Chrome 29	Safari	Firefox 23	iOS	Android
△ 9 ◯ 10〜	△	△ 5.1〜	◯	△ 3.2〜	△ 2.1〜

◯は実装済み、△はベンダープレフィックス付の実装、☓は未実装です。
Google ChoromeとFirefoxは執筆時点での最新バージョンでの実装状況です。

参考URL

8. The ‘transform-origin’ Property - W3C

登録日 : 2013年10月28日最終更新日 : 2013年10月28日

CSSリファレンス