transform.md

CSS 변환 함수(transform)

요소의 변환 효과를 다룬다.

<좌표계>

0 ㅡ ㅡ ㅡ ▶︎ x축
|
|
|
▼ y축

<사용법>

transform: 변환함수1 변환함수2 변환함수3 ... ;

transform: 원근법 이동 크기 회전 기울임;

변환 함수는 크게 '2D 변환 함수' & '3D 변환 함수' 로 나뉜다.

<2D 변환 함수>

--- ▼ 단위: px ---

1. translate(x, y) : 이동(x축, y축)
2. translateX(x) : 이동(x축)
3. translateY(y) : 이동(y축)

--- ▼ 단위: 숫자(없음) ---

1. scale(배수) : 크기(x축, y축으로 배수만큼 변환)

--- ▼ 단위: deg ---

1. rotate(deg) : 회전(각도)
2. skewX(x) : 기울임(x축)
3. skewY(y) : 기울임(y축)

<3D 변환 함수>

--- ▼ 단위: px ---

1. perspective(px) : 원근법(거리)

주의❗️

-> 원근법 함수는 사용시 제일 앞에 작성해야 한다! 함수의 원근 거리의 시작점은 해당 요소가 변환하기 전의 원래 위치의 중심점에서 부터 시작한다.

--- ▼ 단위: deg ---

1. rotateX(x) : 회전(x축)
2. rotateY(y) : 회전(y축)