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);
}

対応ブラウザ

デスクトップ

Chrome

36 以降 ○

35 △

34 △

33 △

32 △

31 △

30 △

29 △

28 △

↑ prefix『-webkit-』が必要

Firefox

16 以降 ○

15 △

14 △

13 △

12 △

11 △

10 △

9 △

8 △

↑ prefix『-moz-』が必要

2 以前 ×

Safari

9 以降 ○

8 △

7 △

6 △

5 △

4 △

3 △

2 △

↑ prefix『-webkit-』が必要

1 以前 ×

Edge

12 以降 ○

全バージョンで対応しています

11 ○

10 ○

9 △

prefix『-ms-』が必要

8 ×

7 ×

6 ×

Opera

23 以降 ○

22 △

21 △

20 △

19 △

18 △

17 △

16 △

15 △

↑ prefix『-webkit-』が必要

22 △

21 △

20 △

19 △

18 △

17 △

16 △

15 △

↑ prefix『-o-』が必要

9 以前 ×

モバイル

iOS Safari

9 以降 ○

8 △

7 △

6 △

5 △

4 △

3 △

2 △

1 △

↑ prefix『-webkit-』が必要

Android Browser

37 以降 ○

4.4 △

↑ prefix『-webkit-』が必要

3 以前 ×

Chrome Android

概要

『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);
}

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

トップページへ

CSS辞典

transform-origin

サンプルコード

ブラウザでの表示結果

対応ブラウザ

概要