CSS의 transform-style 속성은 중첩된(nested) 자식 요소들이 3D 공간에서 어떻게 렌더링될지 설정하는 데 사용됩니다. 부모 요소에 3D 변형이 적용되어 있을 때, 이 속성을 활용하면 자식 요소까지 입체적인 3D 효과가 자연스럽게 이어지도록 만들 수 있습니다.
transform-style 속성의 주요 값
- flat (기본값): 자식 요소가 부모 요소의 평면 위에 납작하게 렌더링되며, 3D 변형이 유지되지 않습니다.
- preserve-3d: 자식 요소가 3D 공간에서 입체적으로 배치된 상태로 렌더링되어, 회전이나 이동 같은 3D 변형이 그대로 유지됩니다.
아래 예제에서는 transform-style: preserve-3d와 함께 transform 및 transform-origin 속성을 사용하여 요소를 회전시키는 방법을 보여줍니다. transform-origin은 회전이 일어나는 기준점을 지정하는 속성입니다.
예제 코드
다음 코드를 실행하여 transform-style 속성이 실제로 어떻게 동작하는지 직접 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
.demo1 {
width: 300px;
height: 300px;
background-color: yellow;
}
.demo2 {
width: 200px;
height: 200px;
background-color: orange;
}
.demo3 {
width: 100px;
height: 100px;
background-color: blue;
transform: rotate(10deg);
transform-origin: 30% 40%;
transform-style: preserve-3d;
}
</style>
</head>
<body>
<h1>Rotation</h1>
<div class = "demo1">Demo
<div class = "demo2">Demo
<div class = "demo3">
Demo
</div>
</div>
</div>
</body>
</html>위 코드에서 가장 안쪽의 .demo3 요소에 preserve-3d 값이 적용되어 있어, 회전 변형이 3D 공간에서 그대로 유지됩니다. 값을 flat으로 변경하면 자식 요소들이 평면으로 렌더링되는 차이를 비교해 볼 수 있습니다.