transform

• 요소를 변환시켜주는 속성

transform: 변환함수1 변환함수2 변환함수3 ... ;
transform: 원근법 이동 크기 회전 기울임;

---

💙 2D 변환 함수

함수	효과	단위	자주 사용됨
translate(x, y)	이동(x축, y축)	px	o
translateX(x)	이동(x축)	px	o
translateY(y)	이동(y축)	px	o
scale(x, y)	크기(x축, y축)	없음(배수)	o
scaleX(x)	크기(x축)	없음(배수)
scaleY(y)	크기(y축)	없음(배수)
rotate(degree)	회전(각도)	deg	o
skew(x, y)	기울임(x축, y축)	deg
skewX(x)	기울임(x축)	deg	o
skewY(y)	기울임(y축)	deg	o
matrix(n,n,n,n,n,n)	2차원 변환 효과

---

💙 3D 변환 함수

함수	효과	단위	자주 사용됨
translateZ(z)	이동(z축)	px
translate3d(x, y, z)	이동(x축, y축, z축)	px
scaleZ(z)	크기(z축)	없음(배수)
scale3d(x, y, z)	크기(x축, y축, z축)	없음(배수)
perspective(n)	원근법(거리)	px	o
rotateX(x)	회전(x축)	deg	o
rotateY(y)	회전(y축)	deg	o
rotateZ(z)	회전(z축)	deg
rotate3d(x, y, z, a)	회전(x축, y축, z축, 각도)	deg
matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n)	3차원 변환 효과

• 원근법 함수는 제일 앞에 작성해야 함!

---

📢 perspective 속성과 함수 차이점

perspective: 하위 요소를 관찰하는 원근 거리를 지정(px 등으로 단위 지정)

속성 / 함수	적용 대상	기준점 설정
perspective: 600px;	관찰 대상의 부모	perspective-origin
transform: perspective(600px)	관찰 대상	transform-origin

---

📢 backface-visibility 속성

backface-visibility: 3D 변환으로 회전된 요소의 뒷면 숨김 여부

값	효과
visible	뒷면 보임
hidden	뒷면 숨김

---

출처 - 이 포스트는 패스트 캠퍼스의 강의를 참고하여 작성하였습니다.