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.
The
perspective
CSS property defines the distance between the screen and the user in the Z axis, and it looks like this:
perspective: 300px;
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.
This is when we use one of the following units: px
, em
, in
, mm
, cm
, vw
, and so on.
The lower the value, the closer the elements will move in the Z axis. Thus, the perspective is more pronounced. With higher values, the perspective effect is less intense.
CSS:
/*Enable perspective for child elements by applying it on the parent container*/ .parent...