[CSS3] 3d 전용 CSS 속성

CSS에서의 3D 공간의 표현은 우선 원근감을 부여해 화면에 3D 공간을 설정한 후

그 공간 안에서의 2D 요소를 어떻게 행동시킬 지 설정합니다. 

 

 

perspective

원근감을 표시할 수 있도록 Z 인덱스와 관찰자 사이의 거리를 지정하는 속성

Z 인덱스에 관찰자가 가까울 수록 3D 요소가 커짐

기본 값	none
상속	NO
애니메이션	Yes
버전	CSS3
Javascript Syntax	object.style.perspective = '50px'
Property Values	none | length | initial | inherit

 

perspective-origin 

3D 위치의 소실점을 정의함

기본 값	50% 50%
상속	NO
애니메이션	Yes
버전	CSS3
Javascript Syntax	object.style.perspectiveOrigin= '50% 50%'
Property Values	x-axis y-axis | initial | inherit

 

backface-visibility

엘리먼트의 뒷면을 표시할 지의 여부를 설정함

기본 값	visible
상속	NO
애니메이션	NO
버전	CSS3
Javascript Syntax	object.style.backfaceVisibility= 'hidden'
Property Values	visible | hidden | initial | inherit

 

transform-style: preserve-3d

자식 요소를 3D 공간에 배치시킴 

기본 값	flat
상속	NO
애니메이션	NO
버전	CSS3
Javascript Syntax	object.style.transformStyle= 'preserve-3d'
Property Values	flat | preserve-3d | initial | inherit