Go to homepage

Projects /

November 12, 2020

3D Perspective

By CodyHouse
399 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:

Level up your CSS skills

Each month we email a 1-minute CSS tutorial to 20K developers

Awesome! We just sent you a confirmation link by email

Error - please try again or contact us

Your email address is already subscribed

Project duplicated

Project created

Globals imported

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