Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to transform child elements preserve the 3D transformations?
When working with 3D transformations in CSS, preserving the 3D context for child elements requires specific techniques. The transform-style property controls whether child elements are rendered in 3D space or flattened to a 2D plane.
Syntax
selector {
transform-style: preserve-3d | flat;
}
Method 1: Using Transform-style Property
The transform-style: preserve-3d property allows child elements to maintain their 3D positioning when the parent has 3D transforms applied
<!DOCTYPE html>
<html>
<head>
<style>
.container {
perspective: 800px;
padding: 50px;
}
.parent-element {
width: 200px;
height: 200px;
background-color: #4CAF50;
transform: rotateY(45deg);
transform-style: preserve-3d;
position: relative;
}
.child-wrapper-container {
transform: rotateY(-45deg);
transform-style: preserve-3d;
}
.child-element {
width: 80px;
height: 80px;
background-color: #2196F3;
margin: 60px;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<div class="parent-element">
<div class="child-wrapper-container">
<div class="child-element">Child</div>
</div>
</div>
</div>
</body>
</html>
A green parent box rotated 45 degrees with a blue child element that maintains its 3D positioning through the counter-rotation, appearing centered within the parent.
Method 2: Using Absolute Positioning
Absolute positioning allows precise control over child element placement while preserving 3D transformations
<!DOCTYPE html>
<html>
<head>
<style>
.container {
perspective: 800px;
padding: 50px;
}
.parent-element {
width: 200px;
height: 200px;
background-color: #FF5722;
transform: rotateY(30deg);
position: relative;
}
.child-element {
width: 80px;
height: 80px;
background-color: #4CAF50;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotateX(30deg);
color: white;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<div class="parent-element">
<div class="child-element">3D Child</div>
</div>
</div>
</body>
</html>
A red parent box rotated on the Y-axis with a green child element positioned at the center and rotated on the X-axis, demonstrating independent 3D transformations.
Method 3: Using Backface-visibility
The backface-visibility property controls whether the back face of rotated elements remains visible
<!DOCTYPE html>
<html>
<head>
<style>
.container {
perspective: 800px;
padding: 50px;
}
.parent-element {
width: 200px;
height: 120px;
background-color: #9C27B0;
transform: rotateY(60deg);
transform-style: preserve-3d;
}
.child-element {
width: 160px;
height: 80px;
background-color: #FFC107;
margin: 20px;
transform: rotateY(-30deg);
backface-visibility: hidden;
color: black;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<div class="parent-element">
<div class="child-element">Hidden Back</div>
</div>
</div>
</body>
</html>
A purple parent box rotated 60 degrees with a yellow child element that has its backface hidden, creating a clean 3D effect without showing the element's reverse side.
Key Properties
| Property | Values | Purpose |
|---|---|---|
transform-style |
preserve-3d, flat
|
Controls 3D rendering context |
backface-visibility |
visible, hidden
|
Shows/hides element's back face |
perspective |
Length value | Sets viewing distance for 3D effects |
Conclusion
Preserving 3D transformations in child elements requires the transform-style: preserve-3d property combined with appropriate positioning techniques. Use backface-visibility to control element visibility during rotations for cleaner 3D effects.
358 Views
