The transform-style property is used to specify how nested the elements will be in a 3D space.


selector { 

    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.
  • initialinherit

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.

NOTE: The transform-style property must be used together with transform property in order to be functional.


The transform-style property example:


›› go to examples ››