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
-webkit-transform-style: flat | preserve-3d;
- flat (by default)
Flatten all children of this element into the 2D plane.
Preserve the 3D perspective.