CSS) 변환 속성 - transform-origin

1) transform 변환 속성

속성 값

값	의미
transform-origin	요소 변환의 기준점을 설정
transform-style	3D 변환 요소의 자식 요소도 3D 변환을 사용할지 설정
perspective	하위 요소를 관찰하는 원근 거리를 설정
perspective-origin	원근 거리의 기준점을 설정
backface-visibility	3D 변환으로 회전된 요소의 뒷면 숨김을 설정

 

2) transform-origin

요소 변환의 기준점을 설정

속성 값

값	의미	기본값
X축	left, right, center, %, 단위	50%
Y축	top, bottom, center, %, 단위	50%
Z축	단위	0

 

사용법1

transform-origin: 100% 100% 적용-> 요소의 기준값이 이미지의 우측 하단끝이 됨

<img
     src="https://heropy.blog/css/images/logo.png"
     alt="HEROPY"
>

img {
  width: 200px;
  border: 1px solid lightgray;
  transition: 1s;
  transform: rotate(45deg);	// 0deg -> 45deg적용시 동작을 확인 할 수 있음
  transform-origin: 100% 100%;
}

0deg

 

45deg

 

사용법2

transform-origin: right bottom 적용-> 요소의 기준값이 이미지의 우측 하단끝이 됨

<img
     src="https://heropy.blog/css/images/logo.png"
     alt="HEROPY"
>

img {
  width: 200px;
  border: 1px solid lightgray;
  transition: 1s;
  transform: rotate(45deg);	// 0deg -> 45deg적용시 동작을 확인 할 수 있음
  transform-origin: right bottom;
}

0deg

 

45deg