Enable 3D elements

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

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

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!

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top