CSS 3D 활용

 

Transform 3D

 

X축 (가로) 과 Y축 (세로) 에 더불어

사용자가 화면을 보는 방향, 즉 눈과 모니터 방향의 축이 Z축이다.

스크린 표면이 0점이라고 가정한다면, 모니터 방향이 음수, 사용자 방향이 양수이다.

 

이를 통해 3차원 애니메이션을 구현할 수 있다.

 

또한 Perspective 값으로 원근감을 표현할 수 있다.

Z > 0 일 때 Othographic에 가까워지고, Z < 0 일 때 왜곡도가 높아진다.

 

perspective : none; /*원근 없음*/
persepective : 100px; /*100px 바깥에 사용자가 있다고 가정하여 원근 표현*/
perspective-origin : 50% 50%; /*부여된 값으로 원근 효과의 기준점을 지정. (50% 50%이 default)*/

backface-visibility : visible; /* = backface cull */
backface-visibility : hidden /* = show backface */

/*사용 예*/
.box {
    transform: rotateY(45deg) translateZ(100px);
}