HTML - DOM Style Object transformStyle Property

Quiz

HTML DOM Style Object transformStyle property specifies whether child elements are positioned in 3D space or flattened with respect to the plane of the parent element.

Syntax

Set the transformStyle property:

object.style.transformStyle= "flat | preserve-3d | initial | inherit";

Get the transformStyle property:

object.style.transformStyle;

Property Values

Value	Description
flat	It is the default value which specifies that child elements will not preserve their 3D position.
preserve-3d	It specifies that child elements will preserve their 3D position.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents the transform style property of an element.

Example of HTML DOM Style Object 'transformStyle' Property

The following example illsutrates transformStyle applied on 'child1' div element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object transformStyle Property
    </title>
    <style>
        #transform {
            position: relative;
            padding: 50px;
            height: 200px;
            width: 200px;
            border: 2px solid;
            margin: auto;
            background-color: azure;
        }
        #child1 {
            padding: 10px;
            position: absolute;
            border: 2px solid #04af2f;
            background-color: aquamarine;
            transform: rotateY(50deg);
        }
        #child2 {
            padding: 10px;
            position: absolute;
            border: 2px solid #04af2f;
            background-color: aquamarine;
            transform: rotateY(20deg);
        }
    </style>
</head>
<body>
    <p>
        Click to set transform Style property.
    </p>
    <button onclick="fun()">Preserve</button>
    <button onclick="funTwo()">Flat</button>
    <div id="transform">
        <div id="child1">Child1
        <div id="child2">Child2</div>
    </div>
    </div>
    <script>
        function fun() {
            document.getElementById("child1")
                .style.transformStyle = "preserve-3d";
        }
        function funTwo() {
            document.getElementById("child1")
                .style.transformStyle = "Flat";
        }   
    </script>
</body>
</html>

Supported Browsers

Property
transformStyle	Yes 36	Yes 12	Yes 16	Yes 9	Yes 23

html_dom.htm

Print Page