Understanding CSS 3D: perspective and transform-style

Today we share two CSS 3D‑related properties— perspective and transform-style —originally published in the 360 Frontend weekly by engineer An Jia.

The perspective property defines the distance between the viewer and the z=0 plane; it creates a vanishing point for 3D rendering. An example uses a 100 px cube centered at (0,0,0). Different perspective values (0 px, 50 px, 51 px, 100 px) produce the effects shown in the table below.

perspective:0px

perspective:50px

perspective:51px

perspective:100px

Fig 2.1

Fig 2.2

Fig 2.3

Fig 2.4

Notes: a perspective of 0 px yields a flat plane; values between 0 and the element’s size create varying depth; negative or zero values produce no 3D effect. The vanishing point defaults to the element’s centre, but can be changed with perspective-origin.

The transform-style property determines whether an element’s children are rendered in a 3D space ( preserve-3d) or flattened onto the 2D plane ( flat). It is not inherited, so any non‑leaf descendant that needs a 3D context must have the property set explicitly.

Example: rotating small panels with rotateX(-24deg) inside a container that either lacks or has transform-style:preserve-3d. The images illustrate the difference between flat and 3D rendering.

<code>transform: rotateX(70deg) rotateY(-15deg); /* front‑back flip */ transform-style: preserve-3d; /* enable 3D context */</code>

The final result shows a correctly rendered 3D umbrella after applying the above CSS. Full source code is available for online preview.

Reference links:

CSS Transforms 2 – perspective

CSS Transforms 2 – transform‑style

CodePen example