변환

1. transform 속성:  scale(), skew(), rotate(), translate()

# 여러 함수 붙여서 사용할 수 있다
.container .item {
	transform: 변환함수1 변환함수2 변환함수3 ... ;
}

2D 변환함수

• translate(x, y): 이동(x축, y축) ✅ 단위: px
• translateX(x): 이동(x축) ✅ 단위: px
• translateY(y): 이동(y축) ✅ 단위: px
• rotate(degree): 회전(각도) ✅ 단위: deg
• skewX(x): 기울임(x축) ✅ 단위: deg
• skewY(y): 기울임(y축) ✅ 단위: deg
• scale(x, y): 크기(x축, y축) ✅ 단위: 없음

3D 변환함수

• rotateX(x): 회전(x축) ✅ 단위: deg
• rotateY(y): 회전(y축) ✅ 단위: deg
• perspective(n): 원근법(거리) ✅ 단위: px

# ☝🏻주의사항: 원근법 함수는 함수들 중 제일 앞에 작성해야함
.container .item {
	...
	transform: perspective(500px) rotateX(45deg);
    ...
}

2. perspective속성: 하위 요소를 관찰하는 원근 거리를 지정

• ☝🏻 transform속성의 perspective() 함수랑 같은거 아님!! 헷갈림주의
• 속성은 부모에게 사용하고, 적용은 자식에게 가능하다.

.container {
	...
	perspective: 250px;
    ...
}

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

• visible: 뒷면 보임
• hidden: 뒷면 숨김

.container .item {
	...
    backface-visibility: visible;
    ...
}