Webflow Viewport Y Axis Interaction

okay so the first thing i'm doing here

is just adding some rotation

to the card itself and

adding the self perspective setting so

i'm going to repeat that process over

with this

other card and as you can see i'm just

playing around with the self

perspective to see what works

the second thing i'm adding here is just

the the play icon

that we have in our design from our

previous course

so this play icon is just centering it

position absolute we are going to be

using

margin offset to to make sure that it's

completely centered

[Music]

i'm just polishing up some of the

borders around this

card where the clip is so we're just

adding some box shadow

so it doesn't affect or push our

elements away

just adding some very slight and subtle

opacity into that border

and that looks a lot better

next i'm just quickly adding some of the

drop shadows

just to give that extra layer of depth

into each of these cards so there's a

shadow falling on top of the clip card

right behind

so right in the middle

we're going to select the sections so

the section is going to be

our point of reference for the mouse x

movement and the mouse y movement and

right away what i'm doing is i'm

selecting

the flex container which has actually

the features

combo class if you notice there i'm

actually

just playing around with the x-axis

first and rotation on the y-axis so i'm

putting up a little bit of the degrees

20 and 20 and look how nice this

rotation works

we're going to duplicate that same

effect but we're going to actually use

the x

axis now on the mouse y movement

and you can play along with this but

then what it's doing is actually making

it super

super interactive now it's both axes

so both on the y and the x axis

and finally what i want to do is how 3d

usually works is based on

light and reflection i wanted to add a

little circle

where as you move your mouse around that

could be

kind of like an illusion of a light or a

key light hitting down on these cards

and you can do this simply by adding

that circle adding some blur

making the background in white and

border radius we can add a very nice

effect

without having to export a png image

and notice what i'm doing here i'm

adding the same interaction i did

but now i'm doing the opposite so if i

move my mouse over to the left

the light moves to the right and it's

almost that nice effect

as if we were in a 3d space

we do the same thing on the y-axis and

there we go

we have this really cool effect almost

like a sphere as you move your mouse

around

and it looks pretty cool great guys i'll

see you in the next lesson

so we can take a look at the parallax