CSS transform-style Property

Last Updated : 09 Jun, 2023

The transform-style property is used to specify the children of an element are positioned in 3D space or flattened with respect to the plane of the element.

Syntax:

transform-style: flat|preserve-3d|initial|inherit;

Property Values:

flat: This value places the child elements in the same plane as the parent. It does not preserve the 3D position. It is the default value.
preserve-3d: This value enables the child elements to preserve their 3D position.
initial: This is used to set the property to its default value.
inherit: It is used to inherit the property from its parent element.

Example: In this example, we are using the transform-style: flat property.

html

<!DOCTYPE html>
<html>
<head>
    <style>
        .parent {
            margin: 20px;
            border: 1px dotted;
            height: 200px;
            width: 200px;
            background-color: green;
            transform: rotateX(15deg);
            transform-style: flat;
        }
        .child {
            margin: 20px;
            border: 1px dotted;
            height: 250px;
            width: 250px;
            background-color: lightgreen;
            transform: rotateX(45deg);
        }
    </style>
</head>
 
<body>
    <h1>CSS transform-style Property</h1>
    <p>
        The CSS transform-style Property is used
        to set if the children of elements are
        position in 3D space or flattened.
    </p>
     
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

Output:

flat

Example: In this example, we are using transform-style: preserve-3d property.

html

<!DOCTYPE html>
<html>
<head>
    <style>
        .parent {
            margin: 20px;
            border: 1px dotted;
            height: 200px;
            width: 200px;
            background-color: green;
            transform: rotateX(15deg);
            transform-style: preserve-3d;
        }
        .child {
            margin: 20px;
            border: 1px dotted;
            height: 250px;
            width: 250px;
            background-color: lightgreen;
            transform: rotateX(45deg);
        }
    </style>
</head>
 
<body>
    <h1>CSS transform-style Property</h1>
     
    <p>
        The CSS transform-style Property is used
        to set if the children of elements are
        position in 3D space or flattened.
    </p>
     
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

Output:

preserve3d

Example: In this example, we are using transform-style: initial property.

html

<!DOCTYPE html>
<html>
<head>
    <style>
        .parent {
            margin: 20px;
            border: 1px dotted;
            height: 200px;
            width: 200px;
            background-color: green;
            transform: rotateX(15deg);
            transform-style: initial;
        }
        .child {
            margin: 20px;
            border: 1px dotted;
            height: 250px;
            width: 250px;
            background-color: lightgreen;
            transform: rotateX(45deg);
        }
    </style>
</head>
 
<body>
    <h1>CSS transform-style Property</h1>
     
    <p>
        The CSS transform-style Property is used
        to set if the children of elements are
        position in 3D space or flattened.
    </p>
     
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

Output:

initial

Example: In this example, we are using transform-style: inherit property.

html

<!DOCTYPE html>
<html>
<head>
    <style>
        .main {
            transform-style: flat;
        }
 
        .parent {
            margin: 20px;
            border: 1px dotted;
            height: 200px;
            width: 200px;
            background-color: green;
            transform: rotateX(15deg);
            transform-style: inherit;
        }
 
        .child {
            margin: 20px;
            border: 1px dotted;
            height: 250px;
            width: 250px;
            background-color: lightgreen;
            transform: rotateX(45deg);
        }
    </style>
</head>
 
<body>
    <h1>CSS transform-style Property</h1>
 
    <p>
        The CSS transform-style Property is used
        to set if the children of elements are
        position in 3D space or flattened.
    </p>
 
    <div class="main">
        <div class="parent">
            <div class="child"></div>
        </div>
    </div>
</body>
</html>