Enable 3D elements

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

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)

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)

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!