CSS transform-style
The transform-style
property specifies how nested elements are rendered in 3D space. By default, the value is flat
, which means that all child elements are flattened onto the plane of their parent. However, you can also set the value to preserve-3d
, which maintains the 3D positioning of nested elements.
Let's take a look at an example to understand how the transform-style
property works:
In this example, we have a parent div
with a class of container
and two child div
elements with a class of box
. The transform-style
property of the parent container is set to preserve-3d
, which allows us to apply 3D transformations to the child elements.
The transform
property is used to rotate the child boxes along the Y-axis by 45 degrees. Because the parent container has a transform-style
of preserve-3d
, the boxes maintain their 3D positioning and appear to be rotated in 3D space.