<CSS3> 3D 표현하기

 

3D 표현하기

 

transform, perspective, transform-style, transfrom-origin

transform : translateZ() - Z축 이동

transform : translate3D ( , , ) - 세방향 이동

transform : rotateX(deg) -X축 기준 회전

transform : rotateY(deg) -Y축 기준 회전

transform : rotate3D( , , , ) -각 축의 앵글 정해놓고 회전

 

perspective : px - 원근감 깊이 ( 작을수록 원근감이 크다 )

transform : perspective(px)

 

transform-origin : top (회전축 설정)

transform-style : preserve-3D (3D 객체화. 자식태그는 자신의 3D 포지션을 나타낸다. )

 

 

 

 

 

 

1. 사용할 태그

 

 

 

 

 

 

 

 

2. 기본속성 넣기.

 

 

 

 

 

 

 

 

 

 

 

-3D-

 

3. transform : translate3D

 

 

 

 

 

X, Y, Z

 

 

 

- 티가 나진 않지만 앞으로(화면방향, Z방향) 100px 나와있다.  

 

 

 

4. transform : rotateX -Y

 

 

 

X축 방향으로 30도 회전. 정면에서 보면 더 짧아 보이므로 길이가 짧아진것 처럼 보인다.

 

 

 

 

 

5. transform : rotate3D( , , , )

 

 

소수들은 길이가 아닌 앵글.

 

 

 

 

 

 

 

글자를 보면 기울어져 있는 것을 확인할 수 있다.

 

 

 

↓ 한번에 나타낼 수 있음.

 

matrix로도 한번에 나타낼 수 있다.

 

 

 

 

 

 

 

 

 

 

 

 

6. perspective (원근감 ) : px;

 

원근감을 나타내 준다. 3D 변형을 준 속성보다 앞에 나와야 한다.

 

 

 

 

 

 

 

* perspecive가 부모에게 붙느냐, 자식에게 붙느냐의 차이 *

 

 

↓ HTML 태그와 기본 속성.

 

 

 

 

 

 

 

- transform : rotateX(40deg) -> 원근감의 효과를 주지 않으면 단순히 짧아진것 같다.

 

 

 

 

1) 자식태그에게 perspective를 주었을때

 

* transform의 항목으로 들어갈 수 있다 .

perspective(..px)

 

각자 원근감이 표현된다.

 

 

 

 

 

 

 

 

2) 부모태그에게 perspective를 주었을 때

 

 

 

 

부모태그 전체 영역을 기준으로 원근감이 생긴다 .

 

 

 

 

 

 

 

 

 

* 3D표현 실습 및 추가적인 속성 *

(animation, transition 사용)

transform-origin, transform-style : preserve-3d

 

 

 

1. 기본HTML 태그

 

 

 

 

 

2. 기본 CSS 속성.

 

* vertical-align: top : 이미지는 태그 안에서 아래쪽에 공간을 남겨놓는 경우가 있다. 그것을 막기 위해 쓰인다

 

 

 

 

 

 

3. transform : rotateY(50deg)

이미지 말고 poster 태그에

 

 

 

 

원근감이 없어 그냥 좁아진것 처럼 보인다.

 

 

 

4. 원근감을 주기 위해 perspective : 500px를 body에 주기

 

 

 

 

 

 

 

 

4. 무한하게 돌아가는 애니메이션 주기

 

 

 

 

 

 

 

 

 

 

 

5. 돌아가다가 마우스 올리면 이미지 X축으로 회전하게 하기

 

* transition 은 해당 태그가 변화되는 과정을 보여주는 속성이다

* transform -origin : 회전축을 바꿔준다.

 

 

 

원근감만 들어갔기 때문에 실제로 입체는 되지 않는다.

 

 

 

6. 태그 3D 객체화 하기.

부모태그와 위치를 비교했을 때 3D 위치를 갖게 한다.