3-Dimensional

The power of CSS is mind-boggling; not only can we do amazing animations just with CSS, but CSS can also handle three-dimensional designs.

Let's check out the properties that allows us to do so.

perspective

The perspective CSS property defines the distance between the screen and the user in the Z axis, and it looks like this:

perspective: 300px;

Description

Keep in mind that the perspective property is applied to the parent element in order to enable a 3D canvas or space in which its child elements will move.

This property accepts a keyword value, normal, and a length value.

normal

No perspective is defined on the parent element.

Length value

This is when we use one of the following units: px, em, in, mm, cm, vw, and so on.

The lower the value, ...

Get Web Developer's Reference Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.