트랜스폼(Transform)

• 트랜스폼은 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공한다.
• 애니메이션 효과를 제공하지는 않기 때문에 정의된 프로퍼티가 바로 적용되어 화면에 표시된다. 트랜스폼은 애니메이션 효과를 위해 사용하여야 하는 것은 아니지만 애니메이션 효과를 부여할 필요가 있다면 트랜지션이나 애니메이션과 함께 사용된다.

작성 방법

transform: func1 func2 func3 ...;

• 변환함수를 프로퍼티 값으로 쉼표없이 나열한다. 나열순서에 따라 차례대로 효과가 적용된다.

1. 2D 트랜스폼(2D Transfrom)

변환함수

• 2D 트랜스폼은 프로퍼티 값으로 변환 함수를 사용한다
• translate(x, y) : 요소의 위치를 X축으로 x만큼, Y축으로 y만큼 이동시킨다.
  • 단위 : px, %, em 등
• translateX(n) : 요소의 위치를 X축으로 x만큼 이동시킨다.
  • 단위 : px, %, em 등
• translateY(n) : 요소의 위치를 Y축으로 y만큼 이동시킨다.
• scale(x, y) : 요소의 크기를 X축으로 x배, Y축으로 y배 확대 또는 축소 시킨다.
• scaleX(n) : 요소의 크기를 X축으로 x배 확대 또는 축소 시킨다.
• scaleY(n) : 요소의 크기를 Y축으로 y배 확대 또는 축소 시킨다.
• skew(x-angle, y-angle) : 요소를 X축으로 x각도만큼, Y축으로 y각도만큼 기울인다.
• skewX(x-angle) : 요소의 X축으로 x각도만큼 기울인다.