Webflow 3D Transform Animations

all right cool guys let's make these

cards

interactive so i already exported some

of these cards based on our designs in

figma

i have both the front end and the back

of each of these

cards and the idea is that when you

hover over them

a nice 180 degree flip all right so the

first thing i'm gonna do

is go into my features grid

and i'm gonna start adding all these

cards into

their own diff block it's particularly

these two

i'm gonna call this card card

front okay and i'm gonna create a new

diff block

inside that card back i want to add an

image

okay so we have both the back guard and

the front card

let me add a div block we're going to

call this we're gonna move these in here

and we're gonna make this one so this

one's gonna be called the card

just the regular card

and we're gonna make this card relative

because what i'm gonna do is i'm gonna

make the front

uh this one this back of the card i'm

gonna make it float

absolute so we're gonna make this float

on top of the card

by simply putting it on zero and zero

making it to the bottom actually so just

like that

we have the front card and the back card

now what i want to do

is flip this card just to show you

what i'm going to do with the

interaction here if i go down to effects

and i click on 3d transform and i go to

rotate

on the y-axis i can start moving this

card

like this so in essence this is exactly

the transformation that we want to

accomplish

in this case i have created the card the

card is what's going to be moved or

triggered

but i need a secondary block to create

the animation

so let's add a new div block

and i i'm gonna actually put this card

inside this

diff block right here like that

and this is going to be our trigger

element

and we're going to call this the card

scene

okay just want to call this cartoon or

maybe let's just call it the card

trigger okay and so what i'm gonna do is

start setting up the the transform

settings and

activate the children perspective what

i'm doing is just adding

just a rough number so that i can start

having any children

have a nice 3d look and feel on those

rotation

axes so take a look at what is going to

happen now when i rotate this

notice the difference this rotation now

feels a little bit more 3d

creating more depth between the rotation

so that's exactly what i was trying to

accomplish but

if i did it without activating the

parent

children perspective this effect would

not be possible

so anytime you want to create a 3d

transformation

you want to make sure that the parent is

the one that has this activated

and you can of course change the value

of this to to however you like

but the less you have the more

perspective you're gonna get

right now i don't want it to be so ex so

stretched out so i'm just gonna keep it

about 600 pixels the card trigger

is gonna have the interaction so could

we go in over to interactions

and we're going to add a mouse over

interaction

on hover i want it to start an animation

and we are going to create a new one

we're going to call this

card flip

and we're going to select the card

inside

so this one the children and we're going

to have the rotation start

at 1 and the end

i'm going to have the rotation to be

about 180 degrees

so right about there so 180 degrees of

rotation

if i play this animation that's exactly

what i need

all right and i'm going to create that

same animation

on the hover out so going back i can

simply duplicate this

same animation duplicate this duplicate

it and then select on hover

out i want to start an animation and

select

the one i just duplicated once i click

on that

i can rename this call it flip

over flip back and all i have to do

is go back to this same default remove

this secondary keyframe we don't need it

because we assume that it's already

there and now it's coming back

to its default position so let's click

done

and let's go ahead and preview this

interaction let's toggle off that tablet

and phone and portrait

and we can actually make this animation

across all the card triggers so in order

to do that we select

a class and make sure the class is our

trigger and then

preview so now we can see that nice

animation happening

when i hover that card okay guys a

couple of things i'd like to see

is have a cursor similar to how we have

when we have

a button we can do that by simply going

to the card

trigger and on the classes we change the

cursor

over to a pointer alright next up i want

to make sure

that the card that we're flipping over

is the back side

and so right now because this

card has a c index of one we might want

to take that away

and instead we're going to use something

called back

face visibility so just by selecting

these two cards what i want to do is on

the back card so the one i've selected

is the back card

click on the three dots of the 2d 3d

transforms

and the back face visibility i want it

to be hidden

and on the card front i want the card

back face visibility to be visible

so we activate that make sure that it's

blue

and now if we were to preview

so this is actually in reverse so what

i'm gonna do

is i'm going to select the card back

again

and i'm going to do the flip so i'm

going to actually flip this card

using the 3d transformation and i'm

going to rotate this

to 180 so notice what's happening as

soon as i start rotating

this to past 100

what's going to happen is that back face

visibility is no longer there so it's

disappearing and that's exactly what we

want to do

we want to have this card face

completely disappear

and have 180 degrees because when we do

the opposite

or in other words when the card starts

to flip

it's going to reveal that same card of

the back

but on the front end that actually

sounds super confusing

now what's happening is that yes it's

working but it's kind of like going

crazy

and so i want to make sure that the

front

of the card is visible but the back face

of this one is invisible so what we need

to do is just

select the front so the front one again

and we're going to go back to the three

dots and the back face of this front

card i want it to be

hidden simply by doing that now we

should be okay

because both cards are going to be

flipped

and we only want to see one card or one

side

and that's what the back face visibility

does it just hides

the back end of that card when you start

using 3d transformations

all right pretty cool so let's just see

how this would work with the other card

pretty cool guys