🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →

November 12, 2020

3D Perspective

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:

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us