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 */