[CSS] transform 변환 함수

 

▶ transform 2D 변환 함수

 

- translate(x, y): 이동. x축, y축. 단위 입력.
    - x축으로 몇 px 이동, y축으로 몇 px 이동할 것인지.

- translateX: x축에 대한 이동. 단위 입력.
- translateY: y축에 대한 이동. 단위 입력.

- scale(x, y): 크기(x축 y축). 단위는 없음. 배수 입력.
  - scale(1)은 1배. 현재와 동일.
  - 확대하거나 축소할 때 사용.

- scaleX: 크기. x축. 단위는 없음. 배수 입력.
- scaleY: 크기. y축. 단위는 없음. 배수 입력.
  - x축이나 y축으로 확대..

 

- rotate(degree): 회전(각도). 단위는 deg.
    - 45도 기울일 경우 45deg.

 

- skew(x-deg, y-deg): 기울임(x축 y축). 단위 deg.
- skewX(x-deg): 기울임(x축). 단위 deg.
- skewY(y-deg): 기울임(y축). 단위 deg.
  - skew는 요소를 비트는 개념.

 

- matrix(n,n,n,n,n,n): 2차원 변환 효과. 단위 없음. 
  - 인수로 6개의 값을 넣음. 이동/크기/회전/기울기를 만들어냄. 모두 아우름.
  - 일반적으로 사용하기에는 난이도가 있음.

  - 명시적으로 translate, scale, 등을 사용해 matrix를 대체.

 

- 위 함수들은 transform 속성에 띄어쓰기를 통해 여러 개 입력 가능.

 

 

---

 

▶ transform 3D 변환 함수

 

- translate3d(x, y, z)

  : 이동(x축, y축, z축). 단위 입력.

- translateZ(z)

  : 이동(z축). 단위 입력.

  z축은 우리 눈에 보이지 않음. 우리 시야와 방향을 동일하게 가지고 있기 때문.

 

- scale3d(x, y, z)

  : 크기(x축, y축, z축).

   단위 없음. 배수 입력.

- scaleZ(Z)

  : 크기(z축). 단위 없음. 배수 없음.

 

- rotate3d(x, y, z, a)

  : 회전(x벡터, y벡터, z벡터, 각도)

   단위 deg.

- rotateX(x)

  : 회전(x축). 단위 deg

- rotateY(y)

  : 회전(y축). 단위 deg

- rotateZ(z)

  : 회전(z축). 단위 deg

 

- perspective(n)

  : 원근법(거리). 단위 입력.

 

- matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n)

  : 3차원 변환 효과. 단위 없음.

  인수를 16개 가짐.