Skip to content
Transforms and animation

transform-style

Controls whether an element's children remain positioned in 3D space or are flattened into the parent's plane.

157 effects in the catalog use this property.

Syntax

transform-style: flat | preserve-3d;

Watch out

Forgetting `preserve-3d` on the parent is a common card-flip bug: the back face is flattened and the depth effect disappears.

Effects using transform-style

These are working effects from the catalog. Open a tile to inspect the full source.