CSS - transform

⭐ transform

회전, 크기 조절, 기울이기, 이동 효과

     -레이아웃 정의와는 다르게 동작
     (width, height, top 이런 값은 실제로 그 자체에 변동을 주는 것)
     -레이아웃에는 영향 x 그 안에서 동작
     -보여지는 것만 그렇게 보여주는 효과

기본값 : none

     -함수로 작성
     -🚨 함수 적용은 오른쪽에서 왼쪽 방향!
     -스페이싱으로 한 줄에 작성 가능

---

transform에 해당하는 요소들

⭐ scale

크기조절 (숫자만)
     scale() / scaleX() / scaleY() - 2d
     [scale3d() / scaleZ() - 3d]

⭐ rotate

회전 (각도 - deg / turn 단위 등)
     rotate()

⭐ translate

이동 (length/%)
     translate(x, y)

-length(px,em 등)/% 단위)
-값을 하나만 작성하면 x축만 적용 (x, 0)
-%의 경우 기준은 이미지의 크기

⭐ skew

기울이기 (각도)
     skew(x, y)

-값을 하나만 작성하면 x축만 적용
-rotate와 다르게 작동
  (약간의 변형이 생기면서 각도가 변한다 많이 기울일수록 길쭉하게 늘어남)

⭐ transform-origin

변형의 기준점 지정

      기본값 : 중심 (center)

-값으로는 키워드(top, left, bottom, right)와
x, y축 좌표(length/%)를 작성 - 요소의 왼쪽 최상단 꼭지점이 0, 0