CSS 참조 매뉴얼

CSS @규칙(RULES)

CSS 속성 전체

CSS3 transition 속성 CSS3 transform-origin 속성

CSS3 transform-style 속성 사용 방법 및 예제

transform-style CSS 속성은 요소의 자식 요소가 배치되는 위치를 지정합니다3D 공간에서 배치되는지 여부를 지정합니다. 평면화되면, 자식 요소는 세차원 공간에서 독립적으로 존재하지 않습니다.

이 속성은transform지정된 속성의 자식 요소.

아래 표는 이 속성의 사용 설명과 버전 이력, 그리고 JavaScript 스크립트에서 이 속성의 사용 문법을 설명합니다.

기본 값:	flat
적용 대상:	가변 요소
thừa kế:	없음
애니메이션 가능:	아니요.보기: 애니메이션 속성。
버전:	CSS3의 새로운 기능
JavaScript 문법:	object.style.transformStyle="preserve-3d"

transform-style 사용 문법

이 속성의 문법은 다음과 같습니다:

transform-style:　flat　|　preserve-3d　|　initial　|　inherit

아래 예제는 transform을 사용하는 방법을 보여줍니다.-style 속성.

예제

img　{
　　　　/*　크롬,　사파리,　오페라　*/
　　　　-webkit-transform:　rotate(30deg);
　　　　-webkit-transform-style:　preserve-3d;
　　　　/*　파이어폭스　*/
　　　　-moz-transform:　rotate(30deg);
　　　　-moz-transform-style:　preserve-3d;
　　　　/*　IE　9　*/
　　　　-ms-transform:　rotate(30deg);
　　　　-ms-transform-style:　preserve-3d;
　　　　
　　　　transform:　rotate(30deg);
　　　　transform-style:　preserve-3d;
}

테스트해 보세요‹/›

속성 값

아래 표는 이 속성의 값을 설명합니다.

값	설명
flat	요소의 자식 요소는 평면화됩니다, 즉 요소 자체의 평면에 위치합니다. 이는 기본 값입니다.
preserve-3d	요소의 자식 요소는 배치되어야 합니다3D 공간에서.
initial	이 속성을 기본 값으로 설정합니다.
inherit	지정되면, 관련 요소는 부모 요소의 transform을 사용합니다.-style 속성 값.

브라우저 호환성

transform-style 속성의 브라우저 호환성, 아래 표의 숫자는 이 속성을 지원하는 브라우저의 최소 버전 번호를 나타냅니다; 모든 주요 브라우저는 이 속성을 지원합니다.

	파이어폭스 10+ ^-moz-，16 + 크롬 12+ ^-webkit-，36+ 인터넷 익스플로러 11+ Apple 사파리 4+ ^-webkit- 오페라 15+ 　 ^-webkit-，23+

추가로 읽기

다음 튜토리얼을 참조하십시오:CSS3 2D 변환，CSS3 3D 변환

CSS3 transition 속성 CSS3 transform-origin 속성