CSS transform-style Property
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:
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:
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:
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:
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
Share your thoughts in the comments
Please Login to comment...