Enabling 3D perspective will make it possible to move, rotate, and scale objects in 3D space. A perspective can be set on a parent element and affect all of its children, or just on the element itself. Both of these options unlock 3D transforms. Here we’ll cover:  

  1. No perspective
  2. Children perspective
  3. Self perspective
  4. Scaling along the Z-axis

No perspective

When a perspective is not set, all 3D-compatible transforms (e.g. rotate X, rotate Y, move Z, and scale Z) will either have a flat, two-dimensional appearance or just won’t have any effect.

 

Children perspective

Setting a children perspective creates the most realistic looking 3D effect. This setting is enabled on the parent element so it creates a 3D perspective on all of its child elements.

Here’s an example of how setting children perspective will affect all the children with transforms enabled (in this case they all have the same transform value):

 

To enable children perspective, follow these steps:

  1. Select any parent element, preferably a section
  2. Go to the Style Panel (shortcut: S)
  3. Scroll to Transitions & Transforms
  4. Set a Children Perspective value of 1000px
 

The higher the children perspective value is, the more flattened the transform will appear. The lower the value, the more dramatic the 3D effect will be.

Self Perspective

Setting a self perspective will also make 3D transforms appear in the 3D, but the effect isn’t as realistic as setting children perspective on the parent element. That’s because self perspective sets a perspective on the actual element that has the transform.

In this example, you can see how self perspective only affects the element with it applied:

 

You can apply the self perspective by following these steps:

  1. Select the element with transforms
  2. Go to the Style Panel (shortcut: S)
  3. Scroll to Transitions & Transforms
  4. Click the settings icon next to Transform
  5. Set Self Perspective to 1000px
 

Scaling along the Z-axis

Scaling along the Z-axis can create a very powerful 3D effect that works on parent elements that have Children with varying z values.

Learn how to transform scale along the Z-axis.