Go to homepage

Projects /

November 12, 2020

3D Perspective

By CodyHouse
404 HTML, CSS, JS components. Download →

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

Globals imported

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