Animating a CSS Transform4:22 with Guil Hernandez
The 'transform' property is animatable, so animating a CSS transform is just as simple as transitioning a CSS property.
- 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.
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