Back to all lessons
Lesson library

Enable 3D elements

Use Children perspective and 2D & 3D transforms to give your elements a 3D look.

This video features an old UI. Updated version coming soon!

Adjusting only 2D and 3D transforms on elements can make them look isometric or flat. To enable true 3D perspective, you’ll need to enable Children perspective on a parent element. This makes the parent element function like a “camera” that shows different angles of the child elements and creates perspective.

To add Children perspective on a parent element:

  1. Select the parent element (e.g., a Section) 
  2. Open Style panel > Effects
  3. Click the 3 disclosure dots to the right of 2D & 3D transforms
  4. Set the Children perspective’s distance (e.g., 1000 pixels)
In the Transform Settings of the 2D & 3D transforms section, the Children perspective distance is set to 1000 pixels.

To add 2D and 3D transforms on a child element:

  1. Select the child element (e.g., a Div block)
  2. Open Style panel > Effects 
  3. Click the “plus” icon to the right of 2D & 3D transforms section
  4. Choose Type > Rotate
  5. Use the sliders to adjust the X and Y axes (e.g., set X to -17 degrees and Y to 23 degrees)
A transform of Rotate is added in the 2D and 3D transforms section, and new values are set for the X and Y axes.
Note: To add 2D and 3D transforms to multiple child elements at the same time, add the same class to each child element. Learn more about Classes.

Now you can go back to the parent element and adjust the Child perspective distance to make the child elements appear either flatter or more 3D. Learn more about using 3D transforms.

Wow! It’s a whole other dimension of awesome!

Try Webflow — it's free