CSS - transform

transform 이란?

요소에 회전, 크기 조절, 기울이기, 이동효과를 부여

Scale : 크기 조절

transform: scale(2, 0.5);
transform: scaleX(0.5);
transform: scaleY(0.3);

• scale(x,y)
  요소의 크기를 X축으로 x배, Y축으로 y배 확대 또는 축소
• scaleX(n)
  요소의 크기를 X축으로 n배 확대 또는 축소
• scaleY(n)
  요소의 크기를 Y축으로 n배 확대 또는 축소

Rotate : 회전

transform: rotate(100deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);

• rotate(n deg)
  요소를 n˚ 만큼 회전
• rotateX(n deg)
  요소를 변형하지 않고 횡축(수평 축)을 중심으로 n˚ 회전
• rotateY(n deg)
  요소를 변형하지 않고 세로축(수직축)을 중심으로 n˚ 회전
• rotateZ(n deg)
  요소를 변형하지 않고 Z축을 중심으로 n˚ 회전

✔ 90deg = 100grad = 0.25turn ≈ 1.5708rad

Translate : 이동

transform: translate(200px);
transform: translate(100px, 200px);

• translate(n)
  요소의 위치를 X축으로 n만큼 이동
• translate(a,b)
  요소의 위치를 X축으로 a, Y축으로 b만큼 이동

skew : 기울이기

transform: skew(100deg, 200deg);
transform: skewX(30deg);
transform: skewY(90deg);

• skew(a deg, b deg)
  요소를 X축으로 a˚ 만큼 Y축으로 b˚만큼 기울임
• skewX(n deg)
  요소를 X축으로 n˚ 만큼 기울임
• skewY(n deg)
  요소를 Y축으로 n˚ 만큼 기울임

transform-origin : 기준점

요소 변환의 기준점을 설정하는 속성으로 transform, transition 속성과 함께 사용된다

transform-origin: x-position | y-position | z-position
/* 예시 */
transform-origin: bottom right 60px;

• x-position : 가로 위치를 정함
• y-position : 세로 위치를 정함
• z-position : z축 위치를 정함
• 기본값은 50% 50%로 요소의 중심점

위치 값으로 사용할 수 있는 값

• 가로 / 세로 위치 값

left | center | right | 백분율 | 길이

• z축 위치 값

길이(length)