CSS transform-style Property
Last Updated : 09 Jun, 2023
Improve
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.
<!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:
Example: In this example, we are using transform-style: preserve-3d property.
<!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:
Example: In this example, we are using transform-style: initial property.
<!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:
Example: In this example, we are using transform-style: inherit property.
<!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:
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-
