Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed CSS Transitions and Transforms!
You have completed CSS Transitions and Transforms!
Preview
The 'transform' property is animatable, so animating a CSS transform is just as simple as transitioning a CSS property.
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
turnangle 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 upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Transforms are applied immediately unless
you define them in a state change,
0:00
like on hover.
0:01
So, let's do that.
0:03
I'll go back to my style sheet.
0:04
And right below the img rule,
0:06
I'm going to create a new rule
that targets images on hover.
0:09
Then I'll add the transform property and
define the rotate function as the value.
0:15
And then I'll go ahead and delete
the transform declaration in the img rule.
0:20
Because now we're going
to rotate to zero degrees
0:25
to the value we defined
here in the hover rule.
0:28
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up