[CSS] transform

transform 이란?

transform속성은 요소에 회전, 크기 조절, 기울이기, 이동 효과등을 부여할 때 사용한다. 속성에 대한 값으로 원하는 함수를 전달하면 된다.
이 때, 애니메이션 효과를 제공하지는 않기 때문에 정의된 프로퍼티가 바로 적용되어 화면에 표시된다. 애니메이션 효과를 부여할 필요가 있다면 트랜지션이나 애니메이션과 함께 사용해야 한다. 이 때, transform 속성은 자식에게도 적용된다.

사용법

transform: func1 func2 func3 ...;

변환 함수를 속성값으로 쉼표없이 나열하면, 나열 순서에 따라 차례대로 적용된다.

속성값

속성값으로 올 수 있는 함수들은 아래와 같다.

회전

rotate(a)

• angle에 들어갈 수 있는 값은 여러 단위가 있다
  • deg, rad, grad, turn을 사용할 수 있다.

크기 조절

scale()은 2D 평면에서 요소의 크기를 조절하는 함수이다.

scale()

scale(sx)
scale(sx, sy)

• sy를 입력하지 않으면 가로와 세로가 같은 비율(종횡비 유지)로 변경된다.
• width, height 속성으로 크기를 조절하는것과는 다른 개념이다 → Layout에는 영향을 주지 않으며 위치와 공간은 원래대로 유지한다.

scaleX()

scaleX(s)

• x축을 따라(수평방향)으로 요소의 크기를 조절하는 함수이다.

scaleY()

scaleY(s)

• Y축을 따라(수직방향)으로 요소의 크기를 조절하는 함수이다.

translate()

skew()

transform-origin

변형되는 기준점을 설정하는 속성이다. → 속성값으로 쓰이는 함수가 아님에 유의하자.

• 기본값은 요소의 정중앙이다(50%,50% - center)
• 설정값으로는 %, px, top, left, bottom, right, center를 사용할 수 있다.
• 이동과 같은 변환의 경우, 기준점을 변경하여도 일정 거리만큼 이동하므로 의미가 없다.
• 0, 0은 top left, 100% 100%는 bottom right과 같은 값이다

속성값

• 속성값이 1개
  • 값은 length, percentage, left, center, right, top, bottom 중 하나여야 한다
• 속성값이 2개
  • 첫 번째 값은 length, percentage또는 left, center, right 중 하나여야 한다.
  • 두 번째 값은 length, percentage또는 top, center, bottom 중 하나여야 한다.
• 속성값이 3개
  • 처음 두 값은 속성값이 2개인 경우와 문법이 동일하다.
  • 세 번째 값은 반드시 length여야 합니다. 이 값은 항상 Z 오프셋(Z 축 위치)을 나타낸다.