2.5D effect

Enter the next dimension — or half dimension — and learn how to layer 2D images in 3D space using the Webflow Designer. We’ll use transforms to create the feeling of 2.5D by adding depth to the elements in your project.

In this lesson you’ll learn:

1. How to turn a Section into a camera
2. How to make objects 3D
3. How to add depth to objects

How to turn a Section into a camera

Let’s turn a Section into a camera so we can see our 2.5D effect on any of its children: 

1. Select your Section
2. Open Style panel > Effects
3. Click 2D & 3D transforms’ 3 disclosure dots to open Transform settings
4. Add a Children perspective by setting a Distance (e.g., 1000 pixels)
   

How to make objects 3D

Now that our Section is acting as a camera for any objects inside it, let’s add a 3D effect to an object in the Section: 

1. Select an object inside the Section (e.g., a “Card” Div block)
2. Open Style panel > Effects
3. Click the 2D & 3D transforms “plus” icon to open Transform settings
4. Choose Rotate as the type and rotate the object about the Y-axis (e.g., 29 degrees) 
   

How to add depth to objects

Let’s give our object a 2.5D effect by adding depth to child objects of the “Card” Div block:

1. Select an object inside the “Card” Div block (e.g., “Profile” Div block) 
2. Open Style panel > Effects
3. Click the 2D & 3D transforms “plus” icon to open Transform settings
4. Choose Move as the type and shift the “Profile” Div block along the Z-axis (e.g., 38 pixels) 
5. Select the “Card” Div block again
6. Open Style panel > Effects
7. Click the 2D & 3D transforms Rotate setting you previously added
8. Rotate the object about the X and Y-axis as you’d like to show off the 2.5D depth effect you just created
   

There you go — you’ve entered the next dimension!

Create more fun interactions using our credit card example and our scrolling mountain feature. Or take your learning up a notch and enroll in our entire Interactions & Animations course.