We’re going to go through the steps necessary
to set up a rotation based on our mouse position. We’ll cover four parts of this: (1) setting
up the trigger, (2) animating the rotation, (3) configuring the resting state, and (4)
we’ll cover how to create the specular highlight (that soft glare we see as we rotate). Before we do any of this, remember that in
CSS, to rotate or move elements with a 3D effect, we have to set perspective. You can see that applying a simple rotational
transform makes the card here look kind of odd or flattened. If we select one of the card’s parent elements
— like the column its sitting in — or the row, or even the body — if we select
one of those elements, we can go down and set a children perspective. This is, of course, the perspective that will
be applied to child elements when any type of 3D transform is added. Alright. Let’s set up our trigger. We’ll select the card, and over in Interactions,
we’ll add a trigger on the element itself. What kind of trigger? A trigger based on the mouse moving over this
element. That’s the trigger. Let’s animate. We’ll create a new animation, and we’ll
call it Rotate on Mouseover. We can animate along the x-axis (0% is what
happens when our mouse is at the leftmost point of the element; 100% is the rightmost
point). And we can animate along the y-axis (0% is
when our mouse is at the top of the element; 100% is when we’re at the bottom). Let’s add four keyframes here. Four actions. At 0% here? We’ll affect rotation. When we’re at the leftmost point, we want
to rotate the card to face our left side. So we’ll set our y-rotation to, let’s
keep it subtle: minus 5 degrees. Let’s do another one for when we’re to
the right. And of course, we’ll set that one to the
other direction: plus 5 degrees. If we turn on Live Preview? It works great. As we hover to the left and right of the element,
the rotation is occurring in real-time. And now we’ll add our first Y action. When we’re at the top, we want to affect
rotation here. Let’s face the card up — let’s get precise
with this one, too, and we can just type in 5 degrees. Same thing on the bottom — when we’re
hovering over the bottom — at 100% — we’ll affect the rotation here as well. And the rotation is behaving exactly as we
expected. Let’s close out of this animation for a
moment. We can always affect smoothing here — add
some damping — so if we crank that all the way up to 100%, and we go back in to the animation? It’ll take longer for the rotation to catch
up with the mouse position. And we can go back at any time and set that
value to whatever we’d like. Let’s talk resting state. Because what happens if we’re moving around
our mouse and we leave the boundary of this card? We can set our resting state values in the
trigger controls. And what this gives us...is control over which
points in our mouse animation are set on the resting state. If we want our resting state to match what
would happen if our mouse was on the top-left? We’d set the mouse X-position to 0%. And we’d set the mouse Y-position to 0%
as well. If we go into our animation (as long as Live
Preview is switched on)? We can see the card has rotated — its resting
state is set — just as if our mouse was on the top-left of the card. This doesn’t change — the resting state
doesn’t modify the actual mouseover animation — or the smoothing — or the easing. We can still play with the card and the values
work the same. But when we hover out, it resets. (It goes back to the resting state we specified.) Let’s go back for now and set this to what’s
essentially the middle. 50% on both values. This will make it appear (in the resting state)
as if we’re in the middle of the animation, where the position is essentially dead center. That’s resting state. Finally, let’s do a highlight effect. And to do this, we’ll just go and drag in
a div block. We can create a class call it Card-highlight,
or really anything we’re in the mood to name it. In this case, we’ll set some dimensions
for this div block (400 pixels wide; 400 pixels high). We’ll also set the position to absolute
(and position it from the top-left). Do keep in mind: in our case the parent element
(the card) is set to relative. That’s why setting the highlight to the
top-left worked properly (as we know, absolute positioning looks up the hierarchy for the
first parent set to anything other the auto). One more note: we set the overflow to none. That’s why the highlight we’re about to
create won’t extend beyond the edge of this card. Let’s set the background color. We want this highlight to be a solid white
color. And we’ll go down and make this elliptical
(in this case circular) by setting the radius to 50%. (This’ll keep things elliptical even if
the dimensions change.) Finally, we’ll go down and drop the opacity
down — let’s get it all the way down to 10% so we can see through this. We can even add in a blur filter to really
soften this out. But while we’re animating, let’s temporarily
turn off the blur so we can see what we’re doing with more precision. Okay. Back over in Interactions. Open up the trigger, then open up the animation
we already built. At 0%, we actually want our highlight to move
in the opposite direction. Why? Well, we know the card here appears to turn
to our left, so a glare or a highlight, would appear move to the right. So let’s move it to the right. And we don’t have to use pixels here; we
can use percentages. 100% — and we can hit enter. Same thing down here when our mouseover position
is all the way to the right. We want our highlight to move to the left. Let’s say negative 50% this time. We can always eyeball this — and it’ll
change based on what our design is. And we’ll finish it off by setting each
point on our up and down actions (movement along the y-axis). When we’re at the top of the card, we’ll
move down 50%. And we can create one more — negative 50%. Let’s check this out. We’ll go over to Preview our entire page. And as expected, the rotation (as well as
the highlight) function properly. And as one final touch, we can go back and
affect the styling for our highlight. Under filters, we can turn that blur back
on. If we go over to preview our page again? Now the rotation works, the highlight works,
and the specular width (thanks to that blur) is much greater. It almost gives the card a semi-gloss — or
even approaching a matte texture. And when we mouse out? When our mouse leaves the boundary? It resets to its dead center — just like
we told it to. And that...is a rotation animation based on
mouse position.
