transform-style

Avatar of Chris Coyier
Chris Coyier on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

The transform-style property, when applied to an element, determines if that element’s children are positioned in 3D space, or flattened.

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

It accepts one of two values: flat (the default) and preserve-3d. To demonstrate the difference between the two values, click the toggle button in the CodePen below: