transform-style CSS property is used to define how child elements are rendered in relation to their parent when 3D transformations are applied. It specifies whether child elements should preserve their 3D transformations or be flattened and rendered in a 2D plane.
transform-style property accepts the following values:
flat: This is the default value. Child elements are rendered in a flattened manner, disregarding any 3D transformations applied to their parent. This means that child elements are rendered in a 2D plane, as if the parent’s 3D transformations do not affect them.
preserve-3d: Child elements preserve their 3D transformations and are rendered in their own 3D space, respecting the transformations applied to their parent. This allows for the nesting of multiple 3D transformed elements, creating a more realistic 3D scene.
Here’s an example:
In this example, the
.container class sets the
transform-style property to
preserve-3d, indicating that child elements within the container should preserve their 3D transformations.
It’s important to note that the
transform-style property only has an effect when used in conjunction with 3D transformations (
transform: rotate3d(), etc.) on parent and child elements. It is primarily used in 3D animations and transitions to create more immersive and realistic effects.
transform-style: preserve-3d, it’s essential to ensure that the parent and child elements have appropriate 3D transformations set and that their rendering order is considered. Additionally, keep in mind that the
preserve-3d value may not be fully supported in older browsers or may have limited support on specific platforms.
transform-style property is particularly useful when working with complex 3D scenes or layered animations, allowing for the preservation of 3D transformations and the creation of visually stunning effects.