How to transform child elements preserve the 3D transformations ?
In this article, we will learn how to transform child elements to preserve the 3D transformation.
The CSS transform-style property is used to transform child elements to preserve the 3D transformations. The transform-style property is used to specify that the children of an element are positioned in 3D space or flattened with respect to the plane of the element. The preserve-3d property value on an element, one can preserve the 3D transformations of its child element.
Syntax:
transform-style: preserve-3d
Property values:
- preserve-3d: This value enables the child elements to preserve their 3D position.
Example 1: Here is the basic example of our above method.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
h2 {
color: green;
}
.parent {
margin: 20px;
border: 1px double;
height: 200px;
width: 200px;
background-color: green;
transform: rotateX(15deg);
/* Now its child's 3d-position is preserved which means
childrens of the this element should be positioned
in the 3D-space not in a plane */
transform-style: preserve-3d;
}
.child {
margin: 20px;
border: 1px dashed;
height: 250px;
width: 250px;
background-color: lightgreen;
transform: rotateX(45deg);
}
</ style >
</ head >
< body >
< center >
< h2 >GeeksforGeeks</ h2 >
< b >CSS transform-style Property</ b >
< div class = "parent" >
< div class = "child" ></ div >
</ div >
</ center >
</ body >
</ html >
|
Output:
transform-style:preserve 3d
Example 2: In this example, we are using the CSS transform style property.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
h2 {
color: green;
}
.parent {
margin: 20px;
border: 1px double;
height: 200px;
width: 200px;
background-color: green;
transform: rotateX(15deg);
/* Now its child's 3d-position is preserved which means
childrens of the this element should be positioned
in the 3D-space not in a plane */
transform-style: preserve-3d;
}
.child {
margin: 20px;
border: 1px dashed;
height: 250px;
width: 250px;
background-color: lightgreen;
transform: rotateX(45deg);
}
.gfg1 {
margin: 20px;
border: 1px double;
height: 200px;
width: 200px;
background-color: green;
transform: rotateX(15deg);
/* flat is default value whose children element
are lying in the plane of the element itself */
transform-style: flat;
}
.gfg2 {
margin: 20px;
border: 1px dashed;
height: 250px;
width: 250px;
background-color: lightgreen;
transform: rotateX(45deg);
}
</ style >
</ head >
< body >
< center >
< h2 >GeeksforGeeks</ h2 >
< br />
< table >
< tr >
< td width = "350px" >
< div >
< b >Flat(default) Property Value</ b >
< div class = "parent" >
< div class = "child" ></ div >
</ div >
</ div >
</ td >
< td width = "350px" >
< div >
< b >preserve-3d Property Value</ b >
< div class = "gfg1" >
< div class = "gfg2" ></ div >
</ div >
</ div >
</ td >
</ tr >
</ table >
</ center >
</ body >
</ html >
|
Output:
flat and preserve 3d properties
Last Updated :
11 May, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...