CSS 트랜스폼-스타일 속성

정의와 사용법

transform-style 속성은 3D 공간에서 내장된 요소를 어떻게 표시할지 정의합니다.

비고:이 속성은 반드시 다음과 함께 사용해야 합니다: transform 속성을 함께 사용합니다.

추가로 참조:

CSS3 강의:CSS3 2D 변환

CSS3 강의:CSS3 3D 변환

HTML DOM 참조 가이드:transformStyle 속성

예제

변환된 자식 요소가 그 3D 변환을 유지하도록 합니다:

div {
  transform: rotateY(60deg);
  transform-style: preserve-3d;
}

본인이 직접 시도해 보세요

CSS 문법

transform-style: flat|preserve-3d;

속성 값

값 설명
flat 자식 요소는 그 3D 위치를 유지하지 않습니다.
preserve-3d 자식 요소는 그 3D 위치를 유지합니다.

기술 세부 사항

기본 값: flat
thừa kế: no
버전: CSS3
JavaScript 문법: object.style.transformStyle="preserve-3d"

브라우저 지원

표에 나타난 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

-webkit- 또는 -moz-로 시작하는 숫자는 프리픽스를 사용하는 첫 번째 버전을 나타냅니다.

크롬 IE / 엣지 파이어폭스 사파리 오페라
36.0
12.0 -webkit-		 11.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-