HTML, CSS - transform-origin

CSS transform-origin속성은 요소 변환의 원점을 설정합니다. 

 

원점은 변환이 적용되는 지점입니다. 기본값은 50% 50%요소의 중심인 입니다.

속성 transform-origin은 백분율, 길이, 키워드 등 CSS 위치로 사용할 수 있는 모든 값으로 설정할 수 있습니다. 예를 들어 다음 코드는 요소의 원점을 왼쪽 위 모서리로 설정합니다.

transform-origin: 0% 0%;

속성 transform-origin을 키워드 값으로 설정할 수도 있습니다. 다음 키워드가 지원됩니다.

top: 요소의 상단 가장자리입니다.
bottom: 요소의 아래쪽 가장자리입니다.
left: 요소의 왼쪽 가장자리입니다.
right: 요소의 오른쪽 가장자리입니다.
center: 요소의 중심입니다.
이 속성은 , 및 transform-origin등의 다른 CSS 변환 속성과 함께 사용할 수 있습니다 .rotatescaleskew

transform-origin다음은 속성을 사용하여 요소를 회전하는 방법의 예입니다 .

transform: rotate(45deg);
transform-origin: 50% 50%;

이 코드는 요소를 중심을 기준으로 45도 회전합니다.

이 transform-origin속성은 요소에 변형이 적용되는 방식을 제어하는 ​​데 매우 유용한 방법이 될 수 있습니다. 원점을 주의 깊게 설정하면 다양한 효과를 낼 수 있습니다.

다음은 부동산에 관해 명심해야 할 몇 가지 추가 사항입니다 transform-origin.

속성 transform-origin은 하위 요소에 상속됩니다.
이 transform-origin속성은 모든 요소에 사용할 수 있지만 변환되는 요소에 가장 일반적으로 사용됩니다.
이 속성은 및 등 transform-origin의 다른 CSS 속성과 함께 사용할 수 있습니다 .positionz-index