[CSS] 변환 (transform)

transform 속성

• scale
  • 요소의 크기를 조절한다
  • x, y축 크기 조절을 별도로 할 수 있음 : scale(x,y)

 

• rotate
  • 요소를 회전한다
  • 기본적으로 요소의 중심을 기준으로 회전하는데, transform-origin 속성으로 기준을 변경할 수 있다

 

• translate
  • 자신의 위치에서 x축, y축 이동을 할 수 있다
  • 기준점은 left, top (왼쪽 상단)
  • 음수도 가능하다
  • 모달을 항상 화면 가운데에 정렬하기

.modal {
	position : absolute;
    top: 50%;
    left: 50%;
    transform : translate(-50%,-50%)
    }

• skew
  • 요소를 왜곡시킨다

 

 

transform 변환 속성 순서에 관하여

변환 함수는 임력하는 순서에 따라 실행 결과가 바뀔 수 있다

rotate를 먼저 하고 translate 하는 것과 translate 하고 rotate 하는 것은 다른 결과가 나오는데

이 이유는 rotate를 하면 그 태그의 축이 바뀌기 때문이다

 

---

transform-origin

• 변환 중심을 설정하는 스타일 속성
• 이 속성은 기본적으로 태그 영역의 중심을 변환 중심으로 잡는다