Notice
Recent Posts
Recent Comments
Link
beepbeep
3차원 변형하기 본문
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 |