transform-origin

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

Desktop

Chrome

36+ ○

35 △

34 △

33 △

32 △

31 △

30 △

29 △

28 △

↑ Requires prefix '-webkit-'

Firefox

16+ ○

15 △

14 △

13 △

12 △

11 △

10 △

9 △

8 △

↑ Requires prefix '-moz-'

2 and earlier ×

Safari

9+ ○

8 △

7 △

6 △

5 △

4 △

3 △

2 △

↑ Requires prefix '-webkit-'

1 and earlier ×

Edge

12+ ○

Supported in all versions

IE

11 ○

10 ○

9 △

Requires prefix '-ms-'

8 ×

7 ×

6 ×

Opera

23+ ○

22 △

21 △

20 △

19 △

18 △

17 △

16 △

15 △

↑ Requires prefix '-webkit-'

22 △

21 △

20 △

19 △

18 △

17 △

16 △

15 △

↑ Requires prefix '-o-'

9 and earlier ×

Mobile

iOS Safari

9+ ○

8 △

7 △

6 △

5 △

4 △

3 △

2 △

1 △

↑ Requires prefix '-webkit-'

Android Browser

37+ ○

4.4 △

↑ Requires prefix '-webkit-'

3 and earlier ×

Chrome Android

Latest ○

Same support as desktop

Firefox Android

Latest ○

Same support as desktop

※ Version data is based on MDN / Can I Use.

The 'transform-origin' property allows you to specify the origin point for transformations such as rotation and translation performed with 'transform'.

You can specify the value using keywords or numbers. When using numbers, units such as '%' or 'px' can be used, with the top-left corner as the reference point. The initial value for both the vertical and horizontal position of 'transform-origin' is 'center' (50% 50%).

The keywords for the vertical position are 'top', 'center', and 'bottom', and the keywords for the horizontal position are 'left', 'center', and '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);
}

When specifying values with '%', '0%' for the vertical position corresponds to 'top', '100%' corresponds to 'bottom'. For the horizontal position, '0%' corresponds to 'left' and '100%' corresponds to '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);
}

When specifying values with 'px', if both values are '0px', it is equivalent to specifying '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);
}