HTML CSS SQL Meta tag Generator ScrollBar design Generator Encode Decode images

CSS Basics

Introduction Syntax Selectors Attribute Selectors Specificity Combinators !important Comments Colors

CSS Need to Know

Box Model Pseudo-class Pseudo-element Inline-block Math Functions Max and Min Opacity Outline Overflow Z-index Float

Most used

Align Backgrounds Borders Text Units Padding Margins Position Tables Display Fonts Lists Height and Width

CSS Reference

CSS Properties reference CSS Pseudo-Classes reference CSS Pseudo-Elements reference CSS Selector reference

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.