1
00:00:08,691 --> 00:00:09,880
Hello everyone.

2
00:00:09,880 --> 00:00:13,540
Today we're going to talk
briefly about transforms.

3
00:00:13,540 --> 00:00:17,350
Transforms are very similar to
transitions, in that they provide another

4
00:00:17,350 --> 00:00:21,720
option for changing the appearance
of elements that are on our page.

5
00:00:21,720 --> 00:00:25,500
So we can change things in both
the two dimensional manner and

6
00:00:25,500 --> 00:00:29,150
a three dimensional manner as
people are looking at your site.

7
00:00:29,150 --> 00:00:32,470
So let's look at some of the two
dimensional transform options.

8
00:00:32,470 --> 00:00:36,770
We're gonna to talk about translate,
rotate, scale,

9
00:00:36,770 --> 00:00:41,240
skew and matrix, and how each one
of these can work within your CSS3.

10
00:00:42,600 --> 00:00:45,500
The first option I'm going
to show you is translate.

11
00:00:45,500 --> 00:00:49,280
What translate will do is that you can
give it two values, I've called them x and

12
00:00:49,280 --> 00:00:51,280
y and depending on those values,

13
00:00:51,280 --> 00:00:55,020
you can move the element to the left and
right or up and down.

14
00:00:55,020 --> 00:00:56,500
If x is positive,

15
00:00:56,500 --> 00:00:59,910
you move off to the right,
if it's negative you move to the left.

16
00:00:59,910 --> 00:01:03,950
With y, if it's positive you move down and
if it's negative you move up.

17
00:01:03,950 --> 00:01:07,810
So let's look at an actual example
to make it a little bit more clear.

18
00:01:07,810 --> 00:01:09,770
Here, I've got this nice blue element.

19
00:01:09,770 --> 00:01:14,120
And what I'm about to say is that I
want to translate it, 100 and 75.

20
00:01:14,120 --> 00:01:18,710
So you're going to expect to see it move
off to the right and down a little bit.

21
00:01:19,990 --> 00:01:23,810
So you can see, again, it's hard to
really tell when things go up and down.

22
00:01:23,810 --> 00:01:27,020
But if you look at the margins, we've
almost effectively increased the margins.

23
00:01:28,610 --> 00:01:30,750
The next option is rotate.

24
00:01:30,750 --> 00:01:33,250
When you rotate something,
you are rotating, or

25
00:01:33,250 --> 00:01:37,420
I kind of like to think of it as spinning
the element, a certain number of degrees.

26
00:01:37,420 --> 00:01:39,060
You don't see the spin.

27
00:01:39,060 --> 00:01:42,390
You just see the result or
what it would look like at the end.

28
00:01:42,390 --> 00:01:47,420
So here I have another element and
I'm gonna tell it to rotate by 30 degrees.

29
00:01:47,420 --> 00:01:50,070
So from here, to here.

30
00:01:50,070 --> 00:01:53,290
Now it's really important
that remember to put the deg.

31
00:01:53,290 --> 00:01:56,950
If you just put 30, many of the browsers
are not going to have that work.

32
00:01:56,950 --> 00:01:58,370
In fact, most of them won't.

33
00:01:58,370 --> 00:02:01,800
So make sure you give it the degrees you
want it to turn, some sort of number, 30,

34
00:02:01,800 --> 00:02:04,540
90, 80, and then use degree.

35
00:02:06,150 --> 00:02:08,210
Next, let's talk about scale.

36
00:02:08,210 --> 00:02:13,080
And scale is just a fancy way of saying,
let's make it wider or taller.

37
00:02:13,080 --> 00:02:15,180
So again, you give it two numbers, and

38
00:02:15,180 --> 00:02:19,780
that's how much you wanna change
the width and the height of an element.

39
00:02:19,780 --> 00:02:21,980
So here I have a smaller block, and

40
00:02:21,980 --> 00:02:27,200
I've decided I'd like to make it two
times as wide and three times as high.

41
00:02:27,200 --> 00:02:30,050
Here's a new element after
the transform scale.

42
00:02:32,340 --> 00:02:37,330
Skew is very hard for me to explain
what it does, and it's even harder to do

43
00:02:37,330 --> 00:02:40,460
it because I always forget my left and
rights when I'm looking at the camera.

44
00:02:40,460 --> 00:02:43,130
So, again, you're going to
want to play with this one and

45
00:02:43,130 --> 00:02:44,820
look at some of the examples.

46
00:02:44,820 --> 00:02:48,360
What you're doing is you're rotating the
element a certain number of degrees around

47
00:02:48,360 --> 00:02:52,250
the x angle and a certain number
of degrees around the y angle.

48
00:02:52,250 --> 00:02:57,390
So here I'm going to show you a skew,
30 degrees by 15 degrees.

49
00:02:57,390 --> 00:03:02,010
You start off here and you end up kind
of turned at a very kind of weird angle.

50
00:03:02,010 --> 00:03:05,310
And again it's very hard to show you
this when I'm staring at the screen, so

51
00:03:05,310 --> 00:03:07,469
I'm hoping you'll type that in and
kind of play with it a little bit.

52
00:03:09,100 --> 00:03:11,580
The next and final option is matrix.

53
00:03:11,580 --> 00:03:12,820
And when you use the matrix,

54
00:03:12,820 --> 00:03:18,020
you can combine all of the 2D transform
methods into one command at once.

55
00:03:18,020 --> 00:03:21,910
I never use this, because I find
it far too confusing to remember

56
00:03:21,910 --> 00:03:25,330
which one's scale,
which one's rotate, which one's skew.

57
00:03:25,330 --> 00:03:30,370
So unless you feel really confident with
your CSS3, I would avoid using matrix and

58
00:03:30,370 --> 00:03:33,760
go ahead and use each of the other
individual transforms one at a time.

59
00:03:34,980 --> 00:03:38,960
So the other ones that we just talked
about were two dimensional transforms.

60
00:03:38,960 --> 00:03:41,850
We can also do three
dimensional transforms, and

61
00:03:41,850 --> 00:03:44,130
they're very similar to
ones we just talked about.

62
00:03:44,130 --> 00:03:48,390
So for instance with rotate, now
instead of just rotating along the x or

63
00:03:48,390 --> 00:03:52,680
y axis, we can also rotate
around the z dimension as well.

64
00:03:52,680 --> 00:03:58,490
So if you wanted to use a 3D rotate,
your options now are transform:rotateY

65
00:03:58,490 --> 00:04:02,140
how many degrees, rotateX, rotateZ,

66
00:04:02,140 --> 00:04:07,900
or you can actually say rotate3d and give
it numbers along every single dimension.

67
00:04:07,900 --> 00:04:11,080
I rarely use the 3D dimensions.

68
00:04:11,080 --> 00:04:12,430
But we do have the options.

69
00:04:12,430 --> 00:04:15,990
We have the rotate, we have the scale,
and we have the translate.

70
00:04:15,990 --> 00:04:19,090
And they can really do some really
interesting things with how you want your

71
00:04:19,090 --> 00:04:19,780
elements to look.

72
00:04:20,940 --> 00:04:25,610
When it comes time to use transforms,
there's a few things to think about.

73
00:04:25,610 --> 00:04:29,900
Typically when you use transforms you're
going to use them with state changes.

74
00:04:29,900 --> 00:04:34,020
If you remember, that means you might
have a transform happen when you do an on

75
00:04:34,020 --> 00:04:37,910
hover, or an on focus, or an on active.

76
00:04:37,910 --> 00:04:40,880
If you're really just trying to change
what an element looks like right from

77
00:04:40,880 --> 00:04:44,700
the start and leave it that way, you may
want to think about just taking pictures

78
00:04:44,700 --> 00:04:47,950
and messing with the pictures and
doing things offline.

79
00:04:47,950 --> 00:04:50,800
It's faster and
it doesn't use up as much bandwidth.

80
00:04:50,800 --> 00:04:53,420
However, it's a cool way to
kinda play with things and

81
00:04:53,420 --> 00:04:55,970
gain confidence with your CSS.

82
00:04:55,970 --> 00:04:59,300
Of course, with so many things we've been
learning in this class, it's important to

83
00:04:59,300 --> 00:05:04,500
remember that you'll often require browser
prefixes to get transforms to work.

84
00:05:04,500 --> 00:05:06,970
So one more tool in your tool belt for

85
00:05:06,970 --> 00:05:08,890
learning how to do something
exciting with your page.

86
00:05:08,890 --> 00:05:11,960
I know that I didn't do my
normal example here, but

87
00:05:11,960 --> 00:05:16,870
the next video is going to show an example
using transitions, transforms, and

88
00:05:16,870 --> 00:05:19,200
some of the other things we've
been learning all along.

89
00:05:19,200 --> 00:05:20,630
I hope you'll take a look at it and

90
00:05:20,630 --> 00:05:24,200
feel a little more confident about
what we just learned with transforms.

91
00:05:24,200 --> 00:05:24,700
Good luck.