1 00:00:00,330 --> 00:00:02,600 Transforms are not animated by default. 2 00:00:02,600 --> 00:00:06,400 And they don't need to be triggered by an action like transitions do. 3 00:00:06,400 --> 00:00:10,590 Transforms are applied immediately unless you define them in a state change, 4 00:00:10,590 --> 00:00:12,120 like on hover. 5 00:00:12,120 --> 00:00:13,080 So, let's do that. 6 00:00:13,080 --> 00:00:15,770 I'll go back to my style sheet. 7 00:00:15,770 --> 00:00:18,150 And right below the img rule, 8 00:00:18,150 --> 00:00:22,220 I'm going to create a new rule that targets images on hover. 9 00:00:24,590 --> 00:00:29,780 Then I'll add the transform property and define the rotate function as the value. 10 00:00:29,780 --> 00:00:34,510 And then I'll go ahead and delete the transform declaration in the img rule. 11 00:00:34,510 --> 00:00:37,670 Because now we're going to rotate to zero degrees 12 00:00:37,670 --> 00:00:40,290 to the value we defined here in the hover rule. 13 00:00:40,290 --> 00:00:44,260 So, let's make this value -15deg. 14 00:00:44,260 --> 00:00:46,900 So, when we take a look at this in the browser and 15 00:00:46,900 --> 00:00:51,860 hover over an image, we can see that the transformation on hover is static. 16 00:00:51,860 --> 00:00:56,820 So, the rotation changes abruptly from 0 to negative 15 degrees. 17 00:00:57,830 --> 00:01:01,290 The great thing is that transform is an animatable property. 18 00:01:01,290 --> 00:01:04,420 So that means we can animate any transform. 19 00:01:04,420 --> 00:01:09,620 Animating a CSS transform is just as simple as transitioning a CSS property. 20 00:01:09,620 --> 00:01:13,370 In fact, by combining transforms with transitions, 21 00:01:13,370 --> 00:01:16,620 we're able to create really cool visual effects with CSS. 22 00:01:16,620 --> 00:01:19,710 Together they're like a CSS power duo. 23 00:01:19,710 --> 00:01:25,390 With a transition I'm able to control this rotation making it smooth and gradual. 24 00:01:25,390 --> 00:01:27,915 So, back in my style sheet, 25 00:01:27,915 --> 00:01:33,718 I'm going to apply a transition to my images here in the img rule. 26 00:01:33,718 --> 00:01:36,442 So I'll type the transition property, and 27 00:01:36,442 --> 00:01:40,950 I specifically want a transition for my transformed functions. 28 00:01:40,950 --> 00:01:46,230 So, I'm going to write transform as the transition property. 29 00:01:46,230 --> 00:01:51,703 And then I'll set the duration to .5s. 30 00:01:51,703 --> 00:01:55,860 All right, so now the rotations come to life. 31 00:01:55,860 --> 00:02:00,000 They animate from 0 to negative 15 degrees on hover, cool. 32 00:02:02,621 --> 00:02:07,470 So now's great time to experiment with rotation values and have a little fun. 33 00:02:07,470 --> 00:02:12,570 So, to see my images spin a full 360 degrees, 34 00:02:12,570 --> 00:02:19,090 I can change the value here in the hover rule to 360 degrees. 35 00:02:20,800 --> 00:02:24,600 So, now we see the transition for a full rotation. 36 00:02:28,201 --> 00:02:32,509 Now if you want the image to rotate more than one full rotation, 37 00:02:32,509 --> 00:02:36,340 you can use a more intuitive unit like turn. 38 00:02:36,340 --> 00:02:40,750 So, one turn equals one full rotation. 39 00:02:43,130 --> 00:02:48,200 And as we can see, it produces the same effect as 360 degrees. 40 00:02:48,200 --> 00:02:51,018 So its one complete rotation. 41 00:02:51,018 --> 00:02:59,060 But if I change the value to 2turn, now the images rotate twice. 42 00:02:59,060 --> 00:03:03,517 So now we're seeing this intense spinning effect in our images. 43 00:03:03,517 --> 00:03:07,299 So if you ever wanna recreate that spinning Batman logo with CSS, 44 00:03:07,299 --> 00:03:11,440 turn would be your go to unit because it produces exactly what you want. 45 00:03:12,560 --> 00:03:17,080 Now, I don't wanna make my users dizzy with this spinning effect so 46 00:03:17,080 --> 00:03:24,105 I'm going to change the rotate value to something smaller, let's say, -5deg. 47 00:03:28,111 --> 00:03:32,690 Cool, so this small counterclockwise rotation is subtle yet effective. 48 00:03:32,690 --> 00:03:36,960 Now, the gallery icon up top is also an image, so 49 00:03:36,960 --> 00:03:39,450 let's give it a slight rotation on hover. 50 00:03:39,450 --> 00:03:45,510 So back in my style sheet, I'll scroll down here to the Logo comment. 51 00:03:45,510 --> 00:03:54,490 And I'll target the logo on hover and give it a transform property. 52 00:03:55,780 --> 00:04:02,398 I'm going to define the rotate() function, and let's rotate it by -20deg. 53 00:04:05,219 --> 00:04:09,253 Nice, so small details like this can delight your users and 54 00:04:09,253 --> 00:04:13,670 add a sort of whimsical touch to your interactions. 55 00:04:13,670 --> 00:04:17,780 In an upcoming video you'll learn how to make rotations even more interesting by 56 00:04:17,780 --> 00:04:21,730 combining them with other transforms, like scale and translate.