transform-style

Avatar of Chris Coyier
Chris Coyier on (Updated on )

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

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: