This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

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