On this Webflow lesson we take a look at 3D transform animations. How to flip an element 180 degrees in Webflow and when to use backface visibility correctly using Webflow.
All our project files for you to practice and play with along with some bonus materials.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
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
Coming Soon
Access our premium community including bonus tutorials, project files & weekly resources.
UNLIMITED ACCCESS