3D styling on the web is strongly coming into form. Especially with Facebook making a full plunge into the Metaverse, 3D styling will soon become more of a norm on the platforms we engage with. Luckily we already have some capabilities there with transform, but it doesn’t get us 100% where we need to be. That’s because the web is 2D, most properties focus only on the x and y axis. With 3D, there is another, z. To do that in CSS we have perspective.
This property takes a value of length in terms of PX or EM and defines its distance on the z plane the element is against the origin. It also is pretty simple, so let’s look at the code.
.Element {
width: 300px;
height: 300px;
transform: rotate(80deg); /* Makes the element 3D */
perspective: 200px; /* Adjusts the element along the z plane */
}