Open In App

CSS transform-style Property

Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output: 

inherit

Supported Browsers: The browser supported by CSS transform-style property are listed below:

  • Chrome 36.0, 12.0 -webkit-
  • Internet Explorer 11.0
  • Firefox 16.0, 10.0 -moz-
  • Safari 9.0, 4.0 -webkit-
  • Opera 23.0, 15.0 -webkit-


Last Updated : 09 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads