Learn how to create a 3D space in CSS.

By default, CSS transformations happen on a bidimensional space. To switch to a 3D space, all you need is the perspective property:

.parent {
  perspective: 1500px; /* 👈 create a 3D space */
}

.child {
  transform: translateZ(20px) rotateX(20deg); /* 👈 transform the element */
}

The perspective property needs to be applied to the parent of the element you want to transform. The lower is the perspective value, and the higher is the distortion.

Here's an demo: