⚡ CYBER NOVEMBER SALE ⚡ 50% off any plan for 6 months, exclusive to new subscribers.

Join the Treehouse affiliate program and earn 25% recurring commission!

Well done!

You have completed CSS Transitions and Transforms!

Sign up for Treehouse Back to Library

Preview

Sign up for Treehouse Continue

Animating a CSS Transform

4:22 with Guil Hernandez

The 'transform' property is animatable, so animating a CSS transform is just as simple as transitioning a CSS property.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Resources

Video review

Transforms are not animated by default.
Transforms do not need to be triggered by an action like transitions do.
By combining transforms with transitions, you're able to create interesting visual effects with CSS.
You can use the turn angle unit to create one, or several, full rotations.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Transforms are not animated by default. 0:00

And they don't need to be triggered by an action like transitions do. 0:02

Transforms are applied immediately unless you define them in a state change, 0:06

like on hover. 0:10

So, let's do that. 0:12

I'll go back to my style sheet. 0:13

And right below the img rule, 0:15

I'm going to create a new rule that targets images on hover. 0:18

Then I'll add the transform property and define the rotate function as the value. 0:24

And then I'll go ahead and delete the transform declaration in the img rule. 0:29

Because now we're going to rotate to zero degrees 0:34

to the value we defined here in the hover rule. 0:37

So, let's make this value -15deg. 0:40

So, when we take a look at this in the browser and 0:44

hover over an image, we can see that the transformation on hover is static. 0:46

So, the rotation changes abruptly from 0 to negative 15 degrees. 0:51

The great thing is that transform is an animatable property. 0:57

So that means we can animate any transform. 1:01

Animating a CSS transform is just as simple as transitioning a CSS property. 1:04

In fact, by combining transforms with transitions, 1:09

we're able to create really cool visual effects with CSS. 1:13

Together they're like a CSS power duo. 1:16

With a transition I'm able to control this rotation making it smooth and gradual. 1:19

So, back in my style sheet, 1:25

I'm going to apply a transition to my images here in the img rule. 1:27

So I'll type the transition property, and 1:33

I specifically want a transition for my transformed functions. 1:36

So, I'm going to write transform as the transition property. 1:40

And then I'll set the duration to .5s. 1:46

All right, so now the rotations come to life. 1:51

They animate from 0 to negative 15 degrees on hover, cool. 1:55

So now's great time to experiment with rotation values and have a little fun. 2:02

So, to see my images spin a full 360 degrees, 2:07

I can change the value here in the hover rule to 360 degrees. 2:12

So, now we see the transition for a full rotation. 2:20

Now if you want the image to rotate more than one full rotation, 2:28

you can use a more intuitive unit like turn. 2:32

So, one turn equals one full rotation. 2:36

And as we can see, it produces the same effect as 360 degrees. 2:43

So its one complete rotation. 2:48

But if I change the value to 2turn, now the images rotate twice. 2:51

So now we're seeing this intense spinning effect in our images. 2:59

So if you ever wanna recreate that spinning Batman logo with CSS, 3:03

turn would be your go to unit because it produces exactly what you want. 3:07

Now, I don't wanna make my users dizzy with this spinning effect so 3:12

I'm going to change the rotate value to something smaller, let's say, -5deg. 3:17

Cool, so this small counterclockwise rotation is subtle yet effective. 3:28

Now, the gallery icon up top is also an image, so 3:32

let's give it a slight rotation on hover. 3:36

So back in my style sheet, I'll scroll down here to the Logo comment. 3:39

And I'll target the logo on hover and give it a transform property. 3:45

I'm going to define the rotate() function, and let's rotate it by -20deg. 3:55

Nice, so small details like this can delight your users and 4:05

add a sort of whimsical touch to your interactions. 4:09

In an upcoming video you'll learn how to make rotations even more interesting by 4:13

combining them with other transforms, like scale and translate. 4:17

You need to sign up for Treehouse in order to download course files.

Sign up

You need to sign up for Treehouse in order to set up Workspace

Sign up