CSS/속성 - 전환 & 변환

변환 속성 - transform-origin

appmaster 2021. 1. 12. 17:03

transform 변환 속성

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

 

 

transform-origin

요소의 변환의 기준점을 설정

의미 기본값
x축 left, right, center, %, 단위 50%
y축 top, bottom, center, %, 단위 50%
z축 단위 0
img{
  width: 200px;
  border: 1px solid lightgray;
  transition: 1s;
  transform: rotate(45deg);
  transform-origin: right bottom;
}

 

'CSS > 속성 - 전환 & 변환' 카테고리의 다른 글

변환 속성 - perspective, perspective-origin  (0) 2021.01.12
변환속성 - transform-style  (0) 2021.01.12
변환 2D 속성  (0) 2021.01.12
Transforms 개요  (0) 2021.01.12
전환(Transitions)  (0) 2021.01.12