JavaScript transformStyle 속성으로 3D 공간에서 중첩 요소 렌더링하기

JavaScript에서 transformStyle 속성을 사용하면 3D 공간에서 중첩된(nested) 요소들이 어떻게 렌더링될지 설정할 수 있습니다.

이 속성은 두 가지 주요 값을 가집니다. 기본값인 flat은 자식 요소들을 부모 요소의 평면 위에 납작하게 배치하고, preserve-3d는 자식 요소들의 3D 변형(rotateY, rotateX 등)을 그대로 유지하여 진정한 입체 공간에 렌더링합니다.

기본 사용법

DOM 요소에 접근한 후 style.transformStyle에 값을 지정하는 것만으로 간단하게 적용할 수 있습니다.

document.getElementById("div2").style.transformStyle = "preserve-3d";

전체 예제 코드

아래 코드를 실행하면 버튼을 클릭하기 전에는 자식 DIV들이 부모 평면에 납작하게 겹쳐 보이지만, 클릭 후 preserve-3d가 적용되면서 각각의 3D 회전이 살아있는 입체적인 형태로 렌더링되는 것을 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         #div1 {
            position: relative;
            margin: 10px;
            height: 200px;
            width: 200px;
            padding: 20px;
            border: 2px solid blue;
         }
         #div2 {
            padding: 80px;
            position: absolute;
            border: 2px solid BLUE;
            background-color: yellow;
            transform: rotateY(45deg);
         }
         #div3 {
            padding: 50px;
            position: absolute;
            border: 2px solid BLUE;
            background-color: green;
            transform: rotateY(60deg);
         }
         #div4 {
            padding: 110px;
            position: absolute;
            border: 2px solid BLUE;
            background-color: red;
            transform: rotateY(60deg);
         }
      </style>
   </head>

   <body>
      <button onclick = "display()">Set</button>
      <div id = "div1"> DIV1
         <div id = "div2"> DIV2
            <div id = "div3"> DIV3 </div>
            <div id = "div4"> DIV4 </div>
         </div>
      </div>
      <script>
         function display() {
            document.getElementById("div2").style.transformStyle = "preserve-3d";
         }
      </script>
   </body>
</html>

예제 동작 원리

DIV1: 파란 테두리를 가진 최상위 컨테이너 역할을 합니다.
DIV2: 노란색 배경에 rotateY(45deg) 변환이 적용된 중간 요소로, 버튼 클릭 시 이 요소에 preserve-3d가 설정됩니다.
DIV3, DIV4: 각각 초록색과 빨간색 배경에 서로 다른 Y축 회전이 적용된 자식 요소들입니다.

preserve-3d가 적용되면 DIV3과 DIV4의 3D 회전이 DIV2의 좌표계 안에서 그대로 유지되어, 마치 여러 장의 카드가 공중에서 서로 다른 각도로 펼쳐진 듯한 입체적 화면을 볼 수 있습니다. 반면 기본값인 flat 상태에서는 모든 자식 요소가 같은 평면으로 압축되어 3D 효과가 사라집니다.