transform

트렌스폼은 html 요소를 회전, 크기 조절 , 기울이기, 이동 효과를 나타낼 때 사용합니다. 사용법은 속성 값으로 특수한 함수를 넣어주는것 입니다.

transform 을 사용하려면 해당 요소의 display 속성이 block 또는 inline-block이어야 합니다.

2D transform 함수를 알아보자!

• translate(x,y) 👉 지정한 크기만큼 x축, y축으로 이동합니다. 단위는 px, %, em 등을 사용 합니다.

• translateX(x) 👉 지정한 크기만큼 x축으로 이동합니다.
  단위는 px, %, em 등을 사용 합니다.

• translateY(y) 👉 지정한 크기만큼 y축으로 이동합니다.
  단위는 px, %, em 등을 사용 합니다.

• scale(x,y) 👉 지정한 크기만큼 x축과 y축으로 x,y 배 만큼 확대, 축소 합니다. 단위는 0 이상의 값 입니다.

• scaleX(x) 👉 지정한 크기만큼 x축으로 x 배 확대, 축소 합니다.
  단위는 0 이상의 값 입니다.

• scaleY(y) 👉 지정한 크기만큼 y축으로 y 배 확대, 축소 합니다.
  단위는 0 이상의 값 입니다.

• rotate(각도) 👉 지정한 각도만큼 회전합니다. 여기서 각도의 값이 양수면 시계방향 음수면 반시계방향으로 회전합니다.
  값은 양수, 음수 모두 가능하며 단위는 deg 를 사용 합니다.

• skew(x,y) 👉 지정한 각도만큼 x축과 y축으로 요소를 기울입니다. 값은 양수, 음수 모두 가능하며 각도의 단위는 deg 를 사용 합니다.

• skewX(x) 👉 지정한 각도만큼 x축으로 요소를 기울입니다.
  값은 양수, 음수 모두 가능하며 각도의 단위는 deg 를 사용 합니다.

• skewY(y) 👉 지정한 각도만큼 y축으로 요소를 기울입니다.
  값은 양수, 음수 모두 가능하며 각도의 단위는 deg 를 사용 합니다.

3D transform 함수를 알아보자.

• translate(x,y,z) 👉 지정한 크기만큼 x축, y축, z축으로 이동합니다. 단위는 px, %, em 등을 사용 합니다.
• translateX(x) 👉 지정한 크기만큼 x축으로 이동합니다.
  단위는 px, %, em 등을 사용 합니다.
• translateY(y) 👉 지정한 크기만큼 y축으로 이동합니다.
  단위는 px, %, em 등을 사용 합니다.
• translateZ(z) 👉 지정한 크기만큼 z축으로 이동합니다.
  단위는 px, %, em 등을 사용 합니다.

• rotate3d(x,y,z) 👉 지정한 각도만큼 x,y,z 축 방향으로 회전합니다.
  값은 양수, 음수 모두 가능하며 각도의 단위인 deg 를 사용 합니다.

• rotateX(각도) 👉 x축을 기준으로 회전합니다. 이때 입체감 있게 표현하려면 perspective 속성을 부모 요소에 적용해야 합니다.
  값은 양수, 음수 모두 가능하며 각도의 단위는 deg 를 사용 합니다.

• rotateY(각도) 👉 y축을 기준으로 회전합니다. 이때 입체감 있게 표현하려면 perspective 속성을 부모 요소에 적용해야 합니다.
  값은 양수, 음수 모두 가능하며 각도의 단위는 deg 를 사용 합니다.

• rotateZ(각도) 👉 z축을 기준으로 회전합니다. 이때 입체감 있게 표현하려면 perspective 속성을 부모 요소에 적용해야 합니다.
  값은 양수, 음수 모두 가능하며 각도의 단위는 deg 를 사용 합니다.

• scale3d(x,y,z) 👉 지정한 크기만큼 x축과 y축으로 x,y 배 만큼 확대, 축소 합니다. 단위는 0 이상의 값 입니다.
• scaleX(x) 👉 지정한 크기만큼 x축으로 x 배 확대, 축소 합니다.
  단위는 0 이상의 값 입니다.
• scaleY(y) 👉 지정한 크기만큼 y축으로 y 배 확대, 축소 합니다.
  단위는 0 이상의 값 입니다.
• scaleZ(z) 👉 지정한 크기만큼 z축으로 z 배 확대, 축소 합니다.
  단위는 0 이상의 값 입니다.