transform-origin

transform-origin 속성은 요소의 움직임 방향을 정의합니다.

특징	설명
기본 값	50% 50% 0
상속	안됨
애니메이션	가능
버전	CSS3

Definition

• transform-origin 속성은 요소의 움직임 방향을 정의합니다.

Syntax

transform-origin : x-axis | y-axis | z-axis | inherit;

Property

속성 값	설명
x-axis	transform X축 방향을 설정합니다. - left - center - right - length - %
y-axis	transform Y축 방향을 설정합니다. - left - center - right - length - %
z-axis	transform Z축 방향을 설정합니다. - left - center - right - length - %
inherit	transform-origin의 값을 상위요소한테 상속받습니다.

Compatibility

							6	7	8	9	10	11
transform-origin

transform-origin

rotate(10deg)

rotate(20deg)

rotate(30deg)

rotate(40deg)

rotate(50deg)

origin:0% 0%;

origin:0% 0%;

origin:0% 0%;

origin:0% 0%;

origin:0% 0%;