Create a 2.5D effect

Layer 2D images in 3D space to add depth to elements in your project.

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

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.

A card and a profile photo show depth and appear to hover in 2.5D space.

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)
A Section is selected in the Webflow Navigator. 
The Children perspective of a Section is adjusted to have a Distance of 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) 
A “Card” Div block is selected in the Webflow Navigator. 
A 29 degree rotation is set on the Y-axis of a Div block.

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
A “Profile” Div block inside the “Card” Div block is selected in the Webflow Navigator.
A 38 pixel move is set on the Z-axis of the “Profile” Div block. 

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

A card and a profile photo show depth and appear to hover in 2.5D space. 

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.

Try Webflow — it's free
No items found.
This video features an old UI. Updated version coming soon!