CSS transform-style Property

The transform-style CSS property determines whether an element's children are positioned in 3D space or flattened in the element's plane. The element's children will not exist on their own in 3D space if it is flattened. Because this property is not inherited, it must be set for the element's non-leaf descendants.

Syntax

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

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .box {
        position: relative;
        height: 200px;
        width: 200px;
        margin: 50px;
        padding: 10px;
        border: 1px solid #00ab55;
    }
    .box-inner1 {
        padding: 40px;
        position: absolute;
        background-color: #ff4842;
        transform: rotateY(40deg);
        transform-style: preserve-3d;
    }
    .box-inner2 {
        padding: 30px;
        position: absolute;
        background-color:  #ffc107;
        transform: rotateY(-40deg);

    }
</style>
</head>
<body>

<div class="box">
    <div class="box-inner1">Hello
        <div class="box-inner2">World!</div>
    </div>
</div>

</body>
</html>

Preview

Property Values

Value	Description
flat	This specifies that child elements will NOT retain their 3D position. This is the default setting.
preserve-3d	This specifies that child elements will keep their 3D position.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Property	Chrome	Firefox	Safari	Edge / IE	Opera
transform-style	36.0 12.0 -webkit-	16.0 10.0 -moz-	9.0 4.0 -webkit-	11.0	23.0 15.0 -webkit-

transform-origin

transition

CSS transform-style Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us