CSS property: -webkit-transform-style


Defines how nested, transformed elements are rendered in 3D space.

If -webkit-transform-style is flat, all children of this element are rendered flattened into the 2D plane of the element. Therefore, rotating the element about the x or y axes causes children positioned at positive or negative z positions to appear on the element’s plane, rather than in front of or behind it. If -webkit-transform-style is preserve-3d, this flattening is not performed, so children maintain their position in 3D space.

This flattening takes place at each element, so preserving a hierarchy of elements in 3D space requires that each ancestor in the hierarchy have the value preserve-3d for -webkit-transform-style. But -webkit-transform-style affects only an element’s children; the leaf nodes in a hierarchy do not require the preserve-3d style.


-webkit-transform-style: flat | preserve-3d;


flat (by default)

Flatten all children of this element into the 2D plane.


Preserve the 3D perspective.