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
Selected Reading
Specify how nested elements are rendered in 3D space
The CSS transform-style property controls how nested child elements are rendered in 3D space. It determines whether child elements are positioned in the flat plane of their parent element or in 3D space.
Syntax
selector {
transform-style: flat | preserve-3d;
}
Possible Values
| Value | Description |
|---|---|
flat |
Child elements are flattened into the parent's plane (default) |
preserve-3d |
Child elements maintain their 3D positioning relative to the parent |
Example: Nested 3D Elements
The following example shows how preserve-3d allows nested child elements to maintain their 3D transformations −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
perspective: 1000px;
margin: 50px;
}
.parent {
width: 300px;
height: 200px;
background-color: #ffeb3b;
transform: rotateY(30deg);
transform-style: preserve-3d;
position: relative;
padding: 20px;
}
.child {
width: 150px;
height: 100px;
background-color: #2196f3;
color: white;
transform: rotateX(45deg) translateZ(50px);
display: flex;
align-items: center;
justify-content: center;
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="parent">
Parent Element
<div class="child">
Child Element
</div>
</div>
</div>
</body>
</html>
A yellow parent element rotated 30 degrees on the Y-axis with a blue child element rotated 45 degrees on the X-axis and translated 50px on the Z-axis, creating a 3D nested effect.
Example: Flat vs Preserve-3D Comparison
The following example demonstrates the difference between flat and preserve-3d values −
<!DOCTYPE html>
<html>
<head>
<style>
.comparison {
display: flex;
gap: 50px;
perspective: 1000px;
margin: 50px;
}
.box {
width: 200px;
height: 150px;
background-color: #9c27b0;
color: white;
padding: 10px;
transform: rotateY(45deg);
position: relative;
}
.flat {
transform-style: flat;
}
.preserve {
transform-style: preserve-3d;
}
.inner {
width: 100px;
height: 75px;
background-color: #f44336;
transform: rotateX(30deg) translateZ(30px);
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="comparison">
<div class="box flat">
transform-style: flat
<div class="inner">Child</div>
</div>
<div class="box preserve">
transform-style: preserve-3d
<div class="inner">Child</div>
</div>
</div>
</body>
</html>
Two purple boxes side by side: the left box with "flat" flattens its red child element, while the right box with "preserve-3d" maintains the child's 3D rotation and translation in space.
Conclusion
The transform-style property is essential for creating complex 3D layouts. Use preserve-3d to maintain nested 3D transformations and flat to flatten child elements into the parent's plane.
Updated on: 2026-03-15T12:35:22+05:30
209 Views
Advertisements