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.