요소의 변환 효과
- transform: 변환함수1 변환함수2 변환함수3 ...;
- transform: 원근법 이동 크기 회전 기울임;
2D 변환 함수
px 단위
- translate(x, y) : 이동(x축, y축)
- translateX(x) : 이동(x축)
- translateY(y) : 이동(y축)
- scale(x, y) : 크기(x축, y축)
deg 단위
- rotate(degree) : 회전(각도)
- skewX(x) : 기울기(x축)
- skewY(y) : 기울기(y축)
3D 변환 함수
px 단위
- perspective(n) : 원근법(거리)
transform: perspective(500px) rotateX(45deg);
- 원근법 함수는 제일 앞에 작성해야 함.
- 물체가 훨씬 입체적으로 표현됨
deg 단위
- rotateX(x) : 회전(x축)
- rotateY(y) : 회전(y축)
perspective
하위 요소를 관찰하는 원근 거리를 지정
단위 : px 등 단위로 지정
perspective 속성과 함수 차이점
perspective: 600px;
- 적용 대상 : 관찰 대상의 부모
- 기준점 설정 : perspective-origin
- 부모 css에 작성해줌
- 선호되는 방식
transfrom: perspective(600px)
- 적용 대상 : 관찰 대상 자체
- 기준점 설정 : transform-origin
backface-visibility
3D 변환으로 회전된 요소의 뒷면 숨김 여부
기본값, visible : 뒷면 보임
hidden : 뒷면 숨김