CSS transform-style 속성 – 자식 요소의 2D 또는 3D 변형 계산 기준 지정

정의 및 사용 방법

transform-style 속성은 transform으로 변형되는 요소에서 자식 요소의 2D 또는 3D 변형 계산 기준을 지정합니다.

이 속성은 transform으로 변형된 요소에 지정합니다.
부모 요소에 지정된 transform-style 속성은 자식 요소들이 transform으로 변형될 때, 부모 요소의 평면(2D) 기준으로 개별 렌더링할지(flat), 아니면 부모 요소의 3D 변형을 그대로 유지하는 가상의 **3D 변형 컨텍스트**를 기준으로 렌더링할지(preserve-3d), 그 계산 기준을 지정합니다.

3D 변형을 그대로 유지하는 가상의 3D 렌더링 공간 기준을 **3D 렌더링 컨텍스트(명세서의 3D rendering context 참조)**라고 부릅니다.

transform-style 속성은 transform으로 변형된 부모와 transform으로 변형된 자식이 렌더링할 때 부모 자식간의 3D 변형 입체감을 유지할지 말지를 설정할 수 있습니다.

기본 예제

아래의 'CSS 라이브 데모'를 통해 transform으로 변형된 요소가 transform-style 속성의 값에 따라 자식 요소들이 transform으로 변형될 때, 어떻게 렌더링 되는지 직접 확인해 보세요.

HTML

<div class="parent"> <!-- transform이 적용된 부모 요소 -->
    Parent
    <div class="child">Child</div> <!-- transform이 적용된 자식 요소 -->
</div>

CSS

.parent { /* 반 투명의 붉은 색 */
    width: 150px; height: 150px;
    transform: perspective(400px) rotateY(40deg); /* transform이 적용된 부모 요소 */
    transform-style: /* value */
}
.child { /* 반 투명의 푸른 색 */
    position: absolute;
    width: 100%; height: 100%;
    transform: rotateX(60deg); /* transform이 적용된 자식 요소 */
}

특징

transform-style 속성은 transform으로 변형된 부모에 적용해야 합니다. 변형되지 않은 부모에 적용할 경우 아무런 효과가 없습니다.
이 속성은 상속되지 않으며, 직계 자식 요소에만 적용됩니다. 만약 부모 > 자식 > 손자 구조에서 손자 요소까지 3D 공간에 입체적으로 배치하고 싶다면, 부모와 자식 요소 모두에게 transform-style: preserve-3d를 지정해야 합니다.

형식 구문

구문

CSS

/* 키워드 값 */
transform-style: flat; /* 초깃값 */
transform-style: preserve-3d;

/* 글로벌 값 */
transform-style: inherit;
transform-style: initial;
transform-style: revert;
transform-style: revert-layer;
transform-style: unset;

값

transform-style 속성 값
`flat`	요소의 자식들이 요소 자체의 평면(2D) 기준으로 개별 렌더링합니다.
`preserve-3d`	요소의 자식들을 3D 변형을 그대로 유지하는 가상의 3D 변형 컨텍스트(명세서의 3D rendering context 참조)를 기준으로 렌더링합니다. (해당 요소는 새로운 쌓임 맥락(Stacking context)을 설정합니다. 이로 인해 `z-index`를 사용한 요소의 겹침 순서 또는 주변 요소와의 겹침 순서가 달라지거나, 모든 하위 요소에 대한 Containing Block이 재정의될 수 있습니다.)

주의할 점

transform-style: preserve-3d를 지정한 요소에 일부 CSS 속성값을 함께 지정하면, preserve-3d 값이 무시되고 flat 값이 적용됩니다.

이러한 일부 CSS 속성값은 다음과 같습니다.

overflow: visible 또는 clip 이외의 값
opacity: 1보다 작은 값
filter: none 이외의 값
clip: auto 이외의 값
clip-path: none 이외의 값
isolation: isolate
mask-image: none 이외의 값
mask-border-source: none 이외의 값
mix-blend-mode: normal 이외의 값
contain: paint 또는 paint 관련 속성 조합(예: content-visibility: hidden 포함)

이러한 속성값이 transform-style: preserve-3d를 지정한 요소에 적용하면, preserve-3d가 무시되고 flat이 강제로 적용된다는 점에 주의하세요.

아래의 라이브 데모 예제에서는 transform-style: preserve-3d가 지정된 요소에 opacity: 0.5를 함께 적용했을 때와 적용하지 않았을 때를 체크박스로 전환해 볼 수 있습니다. opacity: 0.5가 적용되는 순간 preserve-3d가 무시되고 flat 값이 강제로 적용되는 동작을 실제로 확인할 수 있습니다.

HTML

<div class="parent"> <!-- transform이 적용된 부모 요소 -->
    Parent
    <div class="child">Child</div> <!-- transform이 적용된 자식 요소 -->
</div>

CSS

.parent {
    width: 150px;
    height: 150px;
    font-weight: bold;
    background-color: rgba(255, 0, 0, 0.7);
    transform: perspective(400px) rotateY(40deg);
    padding: 1em;
    transform-style: preserve-3d;
}
.child {
    position:absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 255, 0.8);
    transform: rotateX(60deg);
    padding: 1em;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: white;
}

/* 이 한 줄이 preserve-3d를 무효화 */
.parent {
  opacity: 0.5;
}

형식 정의

transform-style 속성의 형식 정의
초깃값	`flat`
적용 요소	변형 가능한 요소 즉, 요소의 영역인 너비나 높이를 지정할 수 있는 요소
상속	아니오
애니메이션	아니오