CSS transform-style property

Description

perspective allows an element to render the children elements to rotate in 3D-space.

But what about the chidren of the children elements. Should they preserve the 3D nature or not?

transform-style decides whether this 3D nature should be preserved into the children of the children elements or not.

Syntax

transform-style : flat | preserve-3d

Property values

flatDefault

In this case, all the children elements are flattened into this element's plane on rotation around X, Y axes.

If .element has flat transform-style, the child element (.element1) rotates in 3D-space.

transform-style: flat;

preserve-3d

All the children elements are not flattened into this element's plane but rather they rotate in 3D-space on rotation around X, Y axes.

If .element has preserve-3d transform-style, the child element (.element1) rotates in 3D-space.

transform-style: preserve-3d;

Applicable to

It applies to all elements

From web4college, the free CSS digger

#CSS digger
Was this article helpful?

 
hover over me to see the effect of transform-style.
▾
×

Ctrl+D