[XML] CSS에서 transform-origin 속성

 

transform-origin 속성을 알기 전에 transform에 알고 싶다면 아래 링크로 들어가주세요 !

https://yyyeji.tistory.com/77

[XML] CSS에서 transform 속성

 

transform-origin 이란  ? ? ?

transform-origin은 CSS transform 속성과 함께 사용되는 속성으로서, 회전 중심(원점·기준점)을 지정합니다.

 

 

transform-origin의 속성 값은 ? ? ?

x, y를 백분율로 나타냅니다.

(대응 가능한 키워드가 있긴 합니다.)

0% - left

0% - top

50% - center

100% - right

100% - bottom

 

 

transform: rotate(45deg);

 

 

 

transform: rotate(45deg);
transform-origin: 150% 0%;

 

 

transform: rotate(45deg);
transform-origin: -150% 0%;

transform: rotate(45deg);
transform-origin: 0% 350%;

 

transform: rotate(45deg);
transform-origin: 0% -350%;

 

 

◡̈