This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

transform-style

Summary

This property specifies how nested elements are rendered in 3D space relative to their parent.

Overview table

Initial value
flat
Applies to
Transformable elements.
Inherited
No
Media
visual
Computed value
As specified.
Animatable
No

CSS Object Model Property
:

Percentages
N/A

Syntax

  • transform-style: flat
  • transform-style: preserve-3d

Values

flat
Child elements will not preserve their 3D position before applying a transform.
preserve-3d
Child elements will preserve their 3D position before applying a transform.

Examples

/* The transformed child div (green) will preserve
   the 3D position applied by the parent div (blue)
   before applying its own transform */
#blue {
width: 10em;
height: 10em;
background-color: blue;
transform: rotateY(60deg);
transform-style: preserve-3d;
}

#green {
margin-left: 30px;
width: 10em;
height: 10em;
background-color: green;
transform: rotateY(60deg);
}

View live example

Notes

This property is only applied to child elements that have a transform specified.

Related specifications

CSS Transforms
W3C Working Draft

Attributions