Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

transform-origin

『transform-origin』プロパティは『transform』で『回転』や『移動』等の変形するときの基点となる位置を指定できます。

ブラウザのバージョンによっては、ベンダープレフィックス『webkit』、『moz』、『ms』等を付けないと動かない場合があるので、使用する際はベンダープレフィックスを付けるようにした方が無難です。

サンプルコード

transform-origin:top left;
-webkit-transform-origin:top left;
-moz-transform-origin:top left;
-ms-transform-origin:top left;

ブラウザでの表示結果

img {
	transform-origin:top left;
	-webkit-transform-origin:top left;
	-moz-transform-origin:top left;
	-ms-transform-origin:top left;

	transform: rotate(10deg);
	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
	-ms-transform: rotate(10deg);
}

対応ブラウザ

IE6	IE7	IE8	IE9	IE10	IE11	Safari	Chrome	Firefox	Opera

iPhone Safari	Android2系標準ブラウザ	Android4系標準ブラウザ

概要

『transform-origin』プロパティは『transform』で『回転』や『移動』等の変形するときの基点となる位置を指定できます。

指定できる値は『キーワード』または数値で、数値で指定する際の単位は『%』や『px』等が使用できます。数値で指定する際の基準となる位置は左上です。『transform-origin』の初期値は『垂直方向の位置』、『水平方向の位置』共に『center』(50% 50%)となります。

『垂直方向の位置』で指定できるキーワードは『top』、『center』、『bottom』となり、『水平方向の位置』で指定できるキーワードは『left』、『center』、『right』となります。

img {
	transform-origin:top left;
	-webkit-transform-origin:top left;
	-moz-transform-origin:top left;
	-ms-transform-origin:top left;

	transform: rotate(10deg);
	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
	-ms-transform: rotate(10deg);
}

『%』を使用した数値で指定する際の『垂直方向の位置』の『0%』は『top』、『100%』は『bottom』、『水平方向の位置』の『0%』は『left』、『100%』は『right』を指定している事と同じになります。

img {
    transform-origin: 20% 30%;
    -webkit-transform-origin: 20% 30%;
    -moz-transform-origin: 20% 30%;
    -ms-transform-origin: 20% 30%;

    transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
}

『px』を使用した数値で指定する際に値が両方共に『0px』の場合は『top left』と指定している事と同じになります。

img {
	transform-origin: 20px 30px;
	-webkit-transform-origin: 20px 30px;
	-moz-transform-origin: 20px 30px;
	-ms-transform-origin: 20px 30px;

	transform: rotate(10deg);
	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
	-ms-transform: rotate(10deg);
}

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ