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:

Result:


.container {
  transform-style: preserve-3d;
}

.box {
  transform: rotateY(45deg);
}

Box 1

Box 2

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.