The transform-style property is used to specify how nested the elements will be in a 3D space.
transform-style: flat | preserve-3d | initial | inherit;
- flat; Default value. Child elements do not preserve the 3D characteristics.
- preserve-3d; Transfers 3D characteristics of the parent element to its children elements.
- initial, inherit
For 3D transforms the transform-style property can be flat (the default) or preserve-3d. If set as ‘flat’ the children elements of a transformed element will stay in 2D (same plane), while if set to the ‘preserve-3d’ the children elements will keep the 3D form with the distance in front of or behind the parent element controlled by the Z axis.
The transform-style property example: