CSS transform-style Property

The transform-style property is used to specify the children of an element are positioned in 3D space or flattened with respect to the plane of the element. 

Syntax:

transform-style: flat|preserve-3d|initial|inherit;

Property Values:

• flat: This value places the child elements in the same plane as the parent. It does not preserve the 3D position. It is the default value. 
• preserve-3d: This value enables the child elements to preserve their 3D position. 
• initial: This is used to set the property to its default value. 
• inherit: It is used to inherit the property from its parent element. 

Example: In this example, we are using the transform-style: flat property.

Output:

 👁 flat

Example: In this example, we are using transform-style: preserve-3d property.

Output:

 👁 preserve3d

Example:  In this example, we are using transform-style: initial property.

Output:

 👁 initial

Example: In this example, we are using transform-style: inherit property.

Output: 

👁 inherit

Supported Browsers: The browser supported by CSS transform-style property are listed below:

• Chrome 36.0, 12.0 -webkit-
• Internet Explorer 11.0
• Firefox 16.0, 10.0 -moz-
• Safari 9.0, 4.0 -webkit-
• Opera 23.0, 15.0 -webkit-