|
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
children of 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 the default value whose children elements
lie 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>preserve-3d Property Value</b>
<div class="parent">
<div class="child"></div>
</div>
</div>
</td>
<td width="350px">
<div>
<b>Flat (default) Property Value</b>
<div class="gfg1">
<div class="gfg2"></div>
</div>
</div>
</td>
</tr>
</table>
</center>
</body>
</html>
Output:
 flat and preserve 3d properties
|
