Streaming live at 10am (PST)

Align stacked rectangle objects (3D)

#1

Hi,
Iv just started to learn webflow from videos trying to build my first site.
no web exprience so be gentle :slight_smile:

Im trying to make a 3d cube made of 3 rectangles stacking up.
each rectangle is in a diffrent div wrapper (1,2,3).
when I put those divs in a single wrapper to stack, they dont align perfectly. weird…
no margins or padding were used creating it.
tried all kinds of things but cant seem to understand were that spacing comes from.
any help will be much appreciated

cube%20div

Here is my site Read-Only: site Read-Only
And the publish link: The published link

#2

Hello @11149

Actually they’re aligned perfectly, you think are not because of the inclination of that side but it’s more an optical illusion rather not being aligned, see this here:

2 Likes
#3

@aaronocampo you are the man!
the idea that the problem is an optical illusion didnt even cross my mind.
thank you so much for your help!

I want to animate the object as a cube (no color borders) moving with the axes (x,y,z)
and then animate the rectangles separately (unfolding). thats why i made the cube composed from 3 rectangles.
whenever i try to animate the cube along the axes the illusion of a cube is dismissed because
of the optical illusion.
would love to know if theres an elegant solution/idea.

#4

I assume you’ve watched the Webflow university videos about 3D animations?

#5

Of course! Webflows university is my home school :blush:
But will review them again, maybe ill find some solution in there.
thanks so much for your time and help @aaronocampo

#6

No problem, if you have an example I might be able to help.