HTML, CSS
3차원 변형하기
삑삑도요
2022. 10. 18. 17:40
1) 원근법
transform: perspective(길이)
원근법을 적용하지 않으면 3차원 변형을 해도 제대로 보이지 않음
2) 이동
transform: perspective(원근법 적용 거리) translate3d(X축, Y축, Z축);
3) X축 회전
transform: perspective(원근법 적용 거리) rotateX(n deg);
4) Y축 회전
transform: perspective(원근법 적용 거리) rotateY(n deg);
* 활용 예시 ) 좌우반전하기
transform: perspective(원근법 적용 거리) rotateY(180deg);
5) Z축 회전
transform: perspective(원근법 적용 거리) rotateZ(n deg);
6) 동시 사용
transform: perspective(원근법 적용 거리) rotate3d(x, y, z, 회전각도_
x, y, z = 벡터값(0~1)