KreativePro Masterclass
Hello, {first_name}
5.6
Self Perspective
Learn to build websites without code in Webflow
Completed
Oops! Something went wrong while submitting the form.
Completed
Browse Lessons
56
lessons
7
hours
MINUTES
2
files
Level

Access our premium community including all courses, resources & offline downloads.

UNLIMITED ACCESS
Overview

Webflow Self Perspective

On this Webflow lesson we take a look at self 3D perspective. How to add advanced transform interactions in Webflow and when to use self perspective vs children perspective on Webflow.

Reviews

Student reviews coming soon

all right guys welcome back

in our previous lesson we learned a

little bit about the 3d perspective

uh settings that we have with webflow

and we want to apply that same idea into

our movie covers i've already gone ahead

and exported some of these assets

so i made a couple of class names so the

three

3d cover class and a combo class for

each one of these so

first then we have the middle one and

then we have

the last one and what i've done is just

added a position absolute

diff block with the border outline and

the cover play icon so these these two

elements are just

floating on top of the image inside the

3d cover element and what i want to do

is i want to have this

two the last the first and the last one

have

a 3d perspective so if we click on the

3d cover

element and we go over to the 2d 3d

transformations

we go ahead and click on add and

and we start to rotate 31 degrees

or around 20 between 20 and 30 degrees

on the y-axis

but there's no 3d perspective so it

doesn't look very 3d ish

and we want to create that perspective

where one side is a little bit bigger

than the

other the reason why this isn't looking

good is because we haven't activated

the perspective option on the web flow

settings

so remember when we talked about

children perspective in our previous

lesson

now we're going to talk about self

perspective we can start changing some

of that value by simply adding

the distance of this perspective on its

own element

just like that so notice the difference

now that we've added that rotation on

the y-axis this feels

a little bit more like a 3d element

but i think about there is pretty good

another thing i want to do is scale this

element more so that it actually

sits just above the middle

element going to add the scale property

and just

make this a little bit bigger so 1.2 is

pretty good

and if we add another one which is the

move we can start

aligning it so that it matches the

margin

or the spacing that we want let's go

ahead and duplicate that same

effect over to the last class

just like that great this looks great

this is exactly what we wanted and now

this whole section

feels a little bit more like a museum

or a 3d almost like you if you were to

put your headset

on you could almost touch each one of

these elements

all right great now let's add some

interactions so when we hover over

each one of these elements i want the

play icon to

fade in a little bit more so it goes

from a 50

opacity over to 100 the outline of the

border

maybe kind of comes on top and the

actual image goes behind

so in order for us to do that we just

select the

interaction panel we select the element

that we want to apply these

effects and in this case it'll be the 3d

cover

so we click on mouse hover

and let's have uh we have two actions

the on hover and the whole one hover out

we will only apply these on desktop and

above

and we want to apply this on all the

class all the classes

or all the elements that have this

particular class which is 3d cover

notice right now this one is selecting

the middle one so what we want to do

is select the actual 3d cover so that's

the global class

that way that interaction is going to

start applying to all three buttons

you can see right here that little

thunderbolt

icon appears on the navigator panel

so it's now added to whatever actions we

have

will be applied to those all right let's

start an animation

what i want to do is call this one the

3d card hover

and on this card we have a series of

elements

the image the outline and the play the

first thing i'm going to do is select

the actual play icon and add

an opacity of

0 or actually opacity about 50.

so just about there and the next thing

i want to do is make sure that i've

selected the

class cover play and only the children

within this class

okay that means that anything that's all

the

only the elements within this actual

element are going to be applied

with these settings uh the next thing is

i'm going to make sure that this is the

initial state

and then i'm going to add an ending

state so the opacity

on the ending state is going to be 100

and the duration

i want it to be a two seconds because i

don't want that to take too long

and i'm going to repeat the same process

over with the other elements

but the other elements i want to have

some different

properties for example the image i want

the image to scale

a little bit smaller than the actual

border so right now

we select that as the time as the

initial state

and we're going to choose x and y

and we're going to go negative so that

0.9

is a little bit too much so we could

even go down to 9.5

like that and then we add a secondary

state

which is on scale and that will go back

to one

so now if we hover over these we know

that

it's going to start from a smaller size

over to its

default size okay

the next thing i want to do is select

the

outline and on the outline we're going

to have a default state

of scale we're going to make that

quite smaller so right about there 0.9

is good

that's going to be our initial state for

the outline

and we're going to add the scale to go

back to

one when we hover

okay so let's try that and see how that

looks

that looks pretty good okay let's make

sure the image

is just a little bit smaller

i'm almost thinking that yeah so the

image is small and then it goes big

and then actually what we want to do

let's see if we can try this out

right now so we have the hover

and let's preview this

okay so this is what's happening when we

hover over each one

not a lot so let's go back and make sure

we add

and fix that right here click on slide

two

and we're going to select again our

interaction

element which is the button click on the

animation

and okay now this all seemed to work but

we just need to play around with the

speed that's what's happening so the

duration is a bit too long on these so

let's go

and put these into it 200 milliseconds

okay so what i want to do is actually

reverse this so the image

is going to start at its original size

and then when we hover i want the image

to scale down so point nine

is a little bit too much so we want to

go back to 0.95

and let's try that okay that looks a lot

better

there we go we're going to click done

and we're going to duplicate this same

animation

and we're going to go into hover out

select that animation which is the

second one we just duplicate it and then

we can just swap the name

to out 3d card

out all we got to do is remove these

three

and that's it let's preview that

okay we click on the icon

okay something is not working so let me

make sure we have the 3d out

okay we have oh okay i see what's

happening we have all these

is set to initial state so we want to

make sure that the out settings don't

have the timing initial state

and we put in the duration of two

seconds

and we click done and that should

actually go

and work there we go so we can see now

that the animation

has the default and hover in

hover in and over out let's just add

that opacity

into that layer i think the opacity

would make this

feel a little bit better all right so

on the hover we want to make sure we add

the outline select the outline click

another property

choose the opacity to zero and then go

back over here

and make sure the opacity is a hundred

make sure that

duration is two point two and there we

go

same thing we do with the over 3d card

out

make sure that the opacity we click on

opacity

is set to zero we've added some really

cool interaction

into our into our movie covers

all right so one thing that i didn't do

was to

add a class to the thumbnail itself and

we're going to be

uh we we're going to need to add a class

these clas

to these images i'm going to call this

the cover

thumbnail

the next thing i want to do here is

go into our interaction panel so go into

the animation and now we have the mouse

over but now i actually want to add

another

element trigger which is going to be

a mouse move over element so this is

actually going to take care of what

happens

when the mouse is actually is on top of

the element and as we move the mouse

around from

x and y it's what do we want them to do

how would you like to interact with them

so that's what it means

the mouse on move so let's add a mouse

on move animation we did the same

similar thing with the vr hands but we

did that with the viewport

now we're actually going to do it

directly on the card itself

i'm going to add a new animation and

this is going to be called let's just

call this 3d cover

okay notice i have mouse x actions and

mouse y

actions that's because it's going to be

whether you're

on the y axis or on the x axis

okay so let's go ahead and play with the

x-axis first i'm going to select the

cover thumb

and add so rotate

and what we want to do is make sure we

selected the class in this case cover

thumb it's going to apply to all of them

i'm going to just change this value to

10 and then this one i'm going to

bring it back to 10. but now that

i've added that i can't really see what

it's doing

and that's because this element does not

have 3d perspective

activated in order for us to activate

that and see

the results we need to activate the

children

of the 3d cover so we've done that to

directly to itself so first we added the

2d

3d transform settings and also we added

on the last

the 2d 3d transforms but we haven't

added that

on the actual middle one because that

one does not need to be transformed

but if we select the three dots we can

change the children perspective

so if we just start slightly moving this

to a default value around 600

we can go back into our interaction

panel

and click on the mouse over the 3d cover

and now we should be able to start

seeing some of this

animation there we go so as you can see

if i toggle that on

this one i want it to be going this way

so about 20 and then this one i wanted

to go about 20

to toggle this on and now you can see

that there's a little bit of

3d transformation going on i've

gone ahead and just changed the 3d

perspective

on the 3d cover to show

to have a 275 distance i think that's a

little bit too much so i'm going to move

that back over to 400 because we don't

want it to go crazy

and we go back into our animations

and just like that we preview we can

preview this on

that looks a little bit better okay make

sure that both values are

the same both on the positive and

negative so i'm going to just

quickly move these back to negative 25

and

positive 25 and let's repeat that with

the y-axis

let's preview that okay

so there we go that looks pretty cool

and

right now it's not applying to all the

other elements so let's do that

so we just simply click on the class and

instead of 3d middle

we make sure that it's 3d cover so now

that should apply to all of the elements

that have the class 3d cover

let's give that a try

wow that's pretty cool a simple fix to

do

to get rid of that is to have

the play icon have a a scale so bring

that up a little bit

in front all right so one thing we could

do select the cover play icon

and go over to the 3d transforms

and on the z index notice what we can do

now

we can move these around in front

just just ever so slightly so let's try

with 10 pixels and see if that fixes the

issue

there we go that looks pretty good

uh on mouse over it's a little bit

clunky so we want to make that

smoother let's go back in and and polish

that up

mouse move and then add smoothing so

maybe about 86 see what happens

there we go that's so much better

all right guys this was fun i'll see you

on the next lesson so we can start

adding some interaction to our

animated vr headsets in the product

section

Coming Soon

The future of the web without code
56
lessons
7
hours
MINUTES
2
files
Level
Digital Media Masterclass by Neftali Loria

Neftali Loria

Author & Instructor
@kreativepro
KreativePro Masterclass Bundle

Access our premium community including all courses, resources & offline downloads.

UNLIMITED ACCCESS