transform-style

Avatar of Chris Coyier
Chris Coyier on (Updated on )

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

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: