transform

transform 속성은 요소의 형태와 위치를 변경하기 위해서 사용됩니다.
이 속성은 2D 혹은 3D공간에서 요소를

• 회전
• 확대 / 축소
• 기울이기
• 이동
  등 다양한 변환을 적용할 수 있습니다.

주요 변환 함수에 대해서 알아봅시다

translate() : 요소를 x축과 y축을 따라 이동합니다.

• translateX(value)
  x축을 따라 요소를 이동합니다.
• translateY(value)
  y축을 따라 요소를 이동합니다.
• translate(x-value, y-value)
  x축와 y축을 따라 동시에 요소를 이동합니다.

scale() : 요소의 크기를 조정합니다.

• scaleX(factor)
  x축 방향으로 확대 / 축소
• scaleY(factor)
  y축 방향으로 확대 / 축소
• scale(x-factor, y-factor)
  x축과 y축 방향으로 동시에 확대 / 축소

rotate() : 요소를 회전시킵니다.

• rotate(angle)
  지정된 각도로 요소를 2d 공간에서 회전

skew() : 요소를 기울입니다.

• skewX(angle)
  x축을 기준으로 기울인다.
• skewY(angle)
  y축을 기준으로 기울인다.
• skew(x-angle, y-angle)
  x축과 y축을 기준으로 동시에 기울인다.

matrix() : 2d 변환을 위한 6개의 매개변수를 사용하는 함수로 위의 모든 변환을 한번에 조합하여 적용할 수 있다.

또한 3d변환을 위한 함수들도 있습니다.

• rotateX() | rotateY() | rotateZ()
• translateZ() | scaleZ()
• perspective()
• matrix3d()