Transform

transform

대상이 되는 요소에 이동, 회전, 확대/축소, 비틀기 등의 변형 효과를 부여

transform 의 속성값

• translate( x, y )
  • 요소의 좌표를 움직일 수 있다.
  • 좌표값을 입력하는 부분에는 양수, 음수 모두 입력 가능
  • 좌표값을 하나만 입력한 경우 두 영역에 동일한 값이 입력된 것으로 간주

transform: translate(20px, 25%)

• translateX( n ) / translateY( n )
  • 요소를 x 좌표 또는 y 좌표를 기준으로 n만큼 움직일 수 있다.

transform: scale(0.75, 1.1)

• scale(x, y)
  • 각 축의 방향으로 x, y만큼 요소를 확대/축소
  • 배수를 입력

transform: scale(0.75, 1.1)

• scaleX( n ) / scaleY( n )
  • x축 혹은 y축 방향으로 n만큼 요소를 확대/축소

transform: scaleY(1.1)

• skew(x, y)
  • 요소를 기울여 마름모꼴로 만들 수 있음

transform: skew(15deg,10deg)

• skewX( n ) / skewY( n )
  • 요소를 x축 혹은 y축 방향으로 n도 만큼 기울임

transform: skewX(15deg)

• rotate ( n)
  • 요소를 n도 만큼 회전

transform: rotate(45deg)

---

transform 중첩 적용

여러 가지 변환 함수를 중첩해서 속성값으로 줄 수 있음

tansform : rotate(75deg) translateY(120px)

---

transform + transition

transform은 transition 이나 animation 과 함께 사용하여 더 다채로운 애니메이션 효과를 만들 수 있음

codepen sample(부드러운 TRANSFORM 애니메이션✨)