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-container { perspective: 300px; } /*Child element will move in a 3D plane*/ .parent-container .element { transform: rotateX(170deg); }
The
perspective-origin
CSS property defines the origin of the X and Y axis of an element in a 3D space, and it looks like this:
Perspective-origin: 24% center;
This is what is known as the
vanishing point used by the perspective
property. The perspective-origin
property supports a combination of three types of value: a length value, a percentage value, and five keyword values in both X and Y axes.
The five keyword values are top
, right
, bottom
, left
, and center
.
CSS:
Adding to the prior CSS from the perspective
example:
/*Enable perspective for child elements by applying it on the parent container*/ /*The origin of the perspective X and Y-axis*/ .parent-container { perspective: 300px; perspective-origin: 24% center; } /*Child element will move in a 3D plane*/ .parent-container .element { transform: rotateX(170deg); }
The
backface-visibility
CSS property defines whether the rear face of an element that's facing the viewer is visible or not, and it looks like this:
backface-visibility: hidden;
The
backface-visibility
property supports two self-explanatory keyword values: visible
and hidden
.
CSS:
And finalizing the prior example from the perspective-origin example: /*Enable perspective for child elements by applying it on the parent container*/ /*The origin of the perspective X and Y-axis*/ .parent-container { perspective: 300px; perspective-origin: 24% center; } /*Child element will move in a 3D plane*/ /*The backside of the element will not be visible*/ .parent-container .element { transform: rotateX(170deg); backface-visibility: hidden; }
18.224.30.19