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.