beepbeep

3차원 변형하기 본문

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)

'HTML, CSS' 카테고리의 다른 글

글자 및 글꼴 관련 스타일  (0) 2022.10.18
2차원 변형하기  (0) 2022.10.18
transition  (0) 2022.10.18
flex-item 전용 속성  (0) 2022.10.18
CSS flex  (0) 2022.10.11