1
00:00:02,160 --> 00:00:05,920
We are now leaving the world of variables

2
00:00:05,920 --> 00:00:07,810
and dive into another

3
00:00:07,810 --> 00:00:10,510
new CSS concept,

4
00:00:10,510 --> 00:00:14,750
CSS transformations, and transitions.

5
00:00:14,750 --> 00:00:18,650
Now we'll first have a look at the fury here to see what

6
00:00:18,650 --> 00:00:20,490
these topics are all about.

7
00:00:20,490 --> 00:00:24,880
And then we'll implement these new concepts into our

8
00:00:24,880 --> 00:00:26,840
existing project.

9
00:00:26,840 --> 00:00:30,740
So what are transformations and transitions?

10
00:00:30,740 --> 00:00:31,573
Well,

11
00:00:31,573 --> 00:00:36,573
a transformation is moving or changing the appearance of an

12
00:00:36,760 --> 00:00:41,010
element. For example, when hovering over it,

13
00:00:41,010 --> 00:00:46,010
an example in our project could be our card container here.

14
00:00:46,820 --> 00:00:50,610
So whenever we hover over this container at the moment,

15
00:00:50,610 --> 00:00:53,080
we have a default hover effect,

16
00:00:53,080 --> 00:00:56,680
changing the background color for example of the button.

17
00:00:56,680 --> 00:01:01,490
But we could also say that if we hover over this entire

18
00:01:01,490 --> 00:01:05,190
container, so here or there, or anywhere on this container,

19
00:01:05,190 --> 00:01:09,599
then it should increase its size by 10, 20, 40,

20
00:01:09,599 --> 00:01:11,790
whatever percent.

21
00:01:11,790 --> 00:01:16,050
This could be achieved by a so-called transformation.

22
00:01:16,050 --> 00:01:17,860
Besides the transformation,

23
00:01:17,860 --> 00:01:20,010
we also have the transition though,

24
00:01:20,010 --> 00:01:23,730
the transition then make sure that we have a smooth

25
00:01:23,730 --> 00:01:25,268
transition from the initial.

26
00:01:25,268 --> 00:01:29,759
So the initial size of our card container in our case to the

27
00:01:29,759 --> 00:01:33,793
transformed state, so to the bigger card size so to say.

28
00:01:34,930 --> 00:01:36,880
From a code perspective,

29
00:01:36,880 --> 00:01:39,520
we'll first have a look at how we can implement a

30
00:01:39,520 --> 00:01:43,080
transformation. So for example, this size increase,

31
00:01:43,080 --> 00:01:44,570
and then a step two,

32
00:01:44,570 --> 00:01:48,700
we'll dive into transitions and how these can be connected

33
00:01:48,700 --> 00:01:51,720
to the actual transformation.

34
00:01:51,720 --> 00:01:55,190
From a code perspective to transformation would look like

35
00:01:55,190 --> 00:01:56,023
this.

36
00:01:56,023 --> 00:01:59,680
Here we have the transform property, that's the property

37
00:01:59,680 --> 00:02:02,890
we need to implement such a transformation.

38
00:02:02,890 --> 00:02:06,932
And we would add this property to the state of the element

39
00:02:06,932 --> 00:02:11,820
that initiates the transformation that triggers the event.

40
00:02:11,820 --> 00:02:12,653
So to say,

41
00:02:12,653 --> 00:02:16,943
which in our case would be hovering over the card container.

42
00:02:17,960 --> 00:02:20,820
This means in the hover pseudo selector,

43
00:02:20,820 --> 00:02:24,150
we add the transform property and then we have different

44
00:02:24,150 --> 00:02:28,033
values we can add to this transform property.

45
00:02:29,020 --> 00:02:30,320
In the example here,

46
00:02:30,320 --> 00:02:33,850
we added the scale value with a factor of

47
00:02:33,850 --> 00:02:37,584
two in parenthesis.This simply means that the scale,

48
00:02:37,584 --> 00:02:41,872
so the size of this element would double. So practically

49
00:02:41,872 --> 00:02:45,334
this would mean you have the initial size in this case of

50
00:02:45,334 --> 00:02:48,730
this book. And once you hover over this book,

51
00:02:48,730 --> 00:02:50,840
then the size would double.

52
00:02:50,840 --> 00:02:54,800
This can be achieved with this transformed property.

53
00:02:54,800 --> 00:02:57,820
Let's have a look at this in practice now. And for this,

54
00:02:57,820 --> 00:02:59,383
we go back to the project.

55
00:03:00,710 --> 00:03:01,720
And as I said,

56
00:03:01,720 --> 00:03:05,010
I want to double the size of the card container.

57
00:03:05,010 --> 00:03:08,823
Once we hover over it, therefore in our code,

58
00:03:09,730 --> 00:03:12,550
in our CSS file,

59
00:03:12,550 --> 00:03:17,550
we go down a bit below our card container class selector,

60
00:03:18,170 --> 00:03:19,490
because as I said,

61
00:03:19,490 --> 00:03:23,913
we won't add the transform property to the element itself,

62
00:03:24,940 --> 00:03:28,360
but to the state of the element that triggers the

63
00:03:28,360 --> 00:03:31,047
transformation. And in our case here,

64
00:03:31,047 --> 00:03:33,750
this transformation should occur

65
00:03:33,750 --> 00:03:38,360
once we hover over our card container and therefore we have

66
00:03:38,360 --> 00:03:43,360
to go with our cards container class once again,

67
00:03:43,470 --> 00:03:46,343
but now at the hover pseudo selector.

68
00:03:48,300 --> 00:03:51,510
With this, we can now add to transform property.

69
00:03:51,510 --> 00:03:52,343
As we saw it,

70
00:03:52,343 --> 00:03:54,830
we use transform and now a colon.

71
00:03:54,830 --> 00:03:58,430
It's a normal property just as any other properties we

72
00:03:58,430 --> 00:04:01,010
learned about in this course so far.

73
00:04:01,010 --> 00:04:05,660
But now here we could add the scale value and there we could

74
00:04:05,660 --> 00:04:08,890
use a factor of two for example.

75
00:04:08,890 --> 00:04:12,773
As I said, this will double the size of the entire element.

76
00:04:13,690 --> 00:04:16,642
By saving this and going back to our project,

77
00:04:17,589 --> 00:04:19,079
and now hovering over the

78
00:04:19,079 --> 00:04:22,130
card, you see that if I zoom out a bit,

79
00:04:22,130 --> 00:04:24,770
maybe to 100%

80
00:04:24,770 --> 00:04:28,530
that yeah, this works, but this is way too big.

81
00:04:28,530 --> 00:04:31,800
Therefore, what we can do now is we can go back,

82
00:04:31,800 --> 00:04:34,980
and instead of this doubling, so instead of this,

83
00:04:34,980 --> 00:04:37,880
100% will increase in size,

84
00:04:37,880 --> 00:04:42,070
we could just go for one.one zero.

85
00:04:42,070 --> 00:04:45,280
So this would be a 10% size increase,

86
00:04:45,280 --> 00:04:47,330
scale one would be, well,

87
00:04:47,330 --> 00:04:51,970
keep the existing size one.one zero would be a 10% size

88
00:04:51,970 --> 00:04:55,950
increase one.two zero 20% and so on.

89
00:04:55,950 --> 00:04:58,670
So we'll go with one.two zero or one.two,

90
00:04:58,670 --> 00:05:01,700
both is working of course, and with this in place.

91
00:05:01,700 --> 00:05:03,490
And by going back,

92
00:05:03,490 --> 00:05:07,083
you'll see that now this effect looks a lot better,

93
00:05:08,200 --> 00:05:09,840
but actually it's still too big.

94
00:05:09,840 --> 00:05:14,250
So I'll actually go down even further to just a very slight

95
00:05:14,250 --> 00:05:16,728
change of maybe 5%.

96
00:05:16,728 --> 00:05:20,330
So let's add this value now and going back again,

97
00:05:20,330 --> 00:05:22,820
you'll see now this looks fine.

98
00:05:22,820 --> 00:05:27,250
By the way, transform is not limited to scale, of course,

99
00:05:27,250 --> 00:05:28,930
attached to this lecture

100
00:05:28,930 --> 00:05:32,540
you can find dedicated information about the transform

101
00:05:32,540 --> 00:05:35,772
property and which values you can apply.

102
00:05:35,772 --> 00:05:38,136
Just to give you one other example here,

103
00:05:38,136 --> 00:05:42,430
let's go back to the code once again, and instead of scale,

104
00:05:42,430 --> 00:05:44,090
I can delete this.

105
00:05:44,090 --> 00:05:48,180
We cannot, for example, at the rotate value,

106
00:05:48,180 --> 00:05:49,810
this one here,

107
00:05:49,810 --> 00:05:53,440
and now we could add 180 DEG

108
00:05:53,440 --> 00:05:56,410
so 180 degrees.

109
00:05:56,410 --> 00:05:59,090
And as you can imagine with this in place,

110
00:05:59,090 --> 00:06:01,840
if we go back and hover over the card, well,

111
00:06:01,840 --> 00:06:04,730
it rotates by 180%.

112
00:06:04,730 --> 00:06:06,560
Once we hovered over it,

113
00:06:06,560 --> 00:06:09,770
not the effect we need for our project though. Therefore,

114
00:06:09,770 --> 00:06:14,550
let's go back and let's add our scale value once again.

115
00:06:14,550 --> 00:06:18,617
So we had scale of one.zero five,

116
00:06:18,617 --> 00:06:23,617
I guess so 5%. So let's go back. Yeah. Now this looks good.

117
00:06:23,700 --> 00:06:28,070
So this is part one to make our page well, a bit more fancy.

118
00:06:28,070 --> 00:06:31,546
So to say, but besides our transformation,

119
00:06:31,546 --> 00:06:35,660
we also saw this transitions concept on the slide.

120
00:06:35,660 --> 00:06:39,263
Let's explore transitions now as a next step.