HTML DOM transformStyle 속성 완벽 정리 – 문법, 값, 실전 예제까지

HTML DOM의 transformStyle 속성은 HTML 문서 내 요소에 2D 또는 3D 변형(transform)을 적용하고, 현재 설정된 값을 반환하는 데 사용됩니다. 특히 자식 요소가 부모 요소의 3D 공간을 유지할지 여부를 결정하는 중요한 역할을 합니다.

문법(Syntax)

transformStyle 속성의 기본 문법은 다음과 같습니다.

값 가져오기(반환)

object.style.transformStyle

값 설정하기(수정)

object.style.transformStyle = "value"

속성 값(Value)

transformStyle 속성에 지정할 수 있는 값은 다음과 같습니다.

값	설명
inherit	부모 요소로부터 이 속성 값을 상속받습니다.
initial	이 속성 값을 기본(default) 값으로 설정합니다.
flat	자식 요소가 3D 위치를 유지하지 않도록 설정합니다. (기본값)
preserve-3d	자식 요소가 3D 위치를 그대로 유지하도록 설정합니다.

예제(Example)

다음은 HTML DOM style transformStyle 속성을 활용한 실제 예제입니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        background: lightgreen;
        height: 100vh;
        text-align: center;
    }
    .outer-box {
        position: relative;
        height: 200px;
        width: 200px;
        margin: 80px;
        padding: 5px;
        border: 2px solid black;
    }
    .inner-box1 {
        padding: 50px;
        position: absolute;
        background-color: coral;
        transform: rotateY(40deg);
    }
    .inner-box2 {
        padding: 40px;
        position: absolute;
        background-color: lightblue;
        transform: rotateY(60deg);
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
</style>
</head>
<body>
<h1>DOM Style transformStyle 속성 예제</h1>
<div class="outer-box">Outer Box
<div class="inner-box1">Inner Box1
<div class="inner-box2">Inner Box2</div>
</div>
</div>
<button onclick="add()" class="btn">Set transformStyle</button>
<script>
    function add() {
        document.querySelector(".inner-box1").style.transformStyle = "preserve-3d";
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM transformStyle 속성 완벽 정리 – 문법, 값, 실전 예제까지

여기서 “Set transformStyle” 버튼을 클릭하면 Inner Box 1에 preserve-3d 값이 적용되어, 자식 요소인 Inner Box 2가 3D 위치를 유지한 채 렌더링되는 것을 확인할 수 있습니다.

HTML DOM transformStyle 속성 완벽 정리 – 문법, 값, 실전 예제까지

정리

transformStyle 속성은 3D 변형을 활용하는 웹 애니메이션이나 입체적인 UI를 구현할 때 필수적인 속성입니다. 기본값인 flat은 자식 요소의 3D 효과를 평면적으로 처리하지만, preserve-3d를 지정하면 부모와 자식 요소 간의 3D 공간 관계가 유지되어 더욱 자연스러운 입체 효과를 만들 수 있습니다.