CSS 변환 스타일 속성
예시
변환된 자식 요소가 3D 변환을 유지하도록 합니다.
div
{
transform: rotateY(60deg);
transform-style: preserve-3d;
}
정의 및 사용
transform-style
속성은 중첩된 요소가 3D 공간에서 렌더링되는 방법을 지정합니다 .
참고: 이 속성은 transform 속성 과 함께 사용해야 합니다 .
transform-style
속성
을 더 잘 이해하려면 데모 를 보십시오 .
기본값: | 평평한 |
---|---|
상속: | 아니요 |
애니메이션 가능: | 아니요. 애니메이션 가능 에 대해 읽기 |
버전: | CSS3 |
자바스크립트 구문: | 개체 .style.transformStyle="보존-3d" |
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
-webkit- 또는 -moz- 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
transform-style | 36.0 12.0 -webkit- |
11.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
CSS 구문
transform-style: flat|preserve-3d|initial|inherit;
속성 값
Property Value | Description |
---|---|
flat | Specifies that child elements will NOT preserve its 3D position. This is default |
preserve-3d | Specifies that child elements will preserve its 3D position |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
관련 페이지
CSS 튜토리얼: CSS 2D 변환
CSS 튜토리얼: CSS 3D 변환
HTML DOM 참조: transformStyle 속성