1
00:00:00,240 --> 00:00:04,190
By now you've seen that
transforms have similar behavior

2
00:00:04,190 --> 00:00:06,660
to relatively positioned elements.

3
00:00:06,660 --> 00:00:10,840
You can rotate, scale, and
skew elements in different directions

4
00:00:10,840 --> 00:00:14,550
without interrupting the normal
flow of the document.

5
00:00:14,550 --> 00:00:17,770
In this video,
you'll learn how translations

6
00:00:17,770 --> 00:00:22,390
in CSS transforms are also similar to
relative positioning in CSS layout.

7
00:00:22,390 --> 00:00:28,460
Translation is the process of moving
something from one place to another.

8
00:00:28,460 --> 00:00:34,270
With the translateX, translateY and
translate functions,

9
00:00:34,270 --> 00:00:38,330
you can move elements sideways
on the X axis or up and

10
00:00:38,330 --> 00:00:42,660
down on the Y axis without affecting
the positions of other elements.

11
00:00:42,660 --> 00:00:46,290
For example, the translateX function

12
00:00:46,290 --> 00:00:51,370
changes the position of an element
on the horizontal axis.

13
00:00:51,370 --> 00:00:56,800
So if go back to my style sheet and change
the transform here in the image hover

14
00:00:57,880 --> 00:01:04,630
rule from rotate, to translateX,
and set the value

15
00:01:06,070 --> 00:01:11,210
to 150 pixels, once we hover over
an image, notice how the images move

16
00:01:11,210 --> 00:01:16,610
left to right on the X axis 150
pixels from the original position.

17
00:01:17,740 --> 00:01:20,770
This is comparable to using the top,
left, bottom,

18
00:01:20,770 --> 00:01:24,830
and right positioning offsets in
relative and absolute positioning.

19
00:01:24,830 --> 00:01:28,510
The transformed element repositioned
itself in a similar way.

20
00:01:30,860 --> 00:01:33,380
So a positive translateX value

21
00:01:33,380 --> 00:01:37,250
will push an element to the right
of its default position, and

22
00:01:37,250 --> 00:01:41,750
a negative value pulls the element
to the left of its default position.

23
00:01:41,750 --> 00:01:46,969
So for instance,
if I change the value to -150

24
00:01:46,969 --> 00:01:52,220
pixels, the images now pull
to the left by 150 pixels.

25
00:01:53,560 --> 00:01:55,460
And like the other transforms,

26
00:01:55,460 --> 00:01:59,840
the original space occupied
by the images remains intact.

27
00:01:59,840 --> 00:02:04,980
Although you may see the translated
element appear on top of other content

28
00:02:04,980 --> 00:02:09,734
like we're seeing here,
the new positions created by translateX or

29
00:02:09,734 --> 00:02:13,750
translateY doesn't actually
affect the surrounding content.

30
00:02:17,542 --> 00:02:20,360
The translateY function
has the same effect

31
00:02:20,360 --> 00:02:24,860
except it changes the position of
an element on the vertical axis.

32
00:02:24,860 --> 00:02:32,380
So let's change translateX to translateY
and set the value to 150 pixels.

33
00:02:34,270 --> 00:02:40,670
So this pushes an image down 150
pixels from its original position.

34
00:02:40,670 --> 00:02:43,740
Now a negative value will move
it in the opposite direction.

35
00:02:43,740 --> 00:02:49,610
So, for instance,
negative 150 pixels pulls an image up.

36
00:02:49,610 --> 00:02:50,590
From its original position.

37
00:02:52,470 --> 00:02:57,240
Translate functions can accept any length
unit or a percentage as its value.

38
00:02:57,240 --> 00:02:58,550
If we use a percentage value,

39
00:02:58,550 --> 00:03:03,420
the value moves the element
relative to its original position.

40
00:03:03,420 --> 00:03:08,010
So if I set a translateX of 100%,

41
00:03:08,010 --> 00:03:15,110
this value pushes an image 100% to
the right of its original space.

42
00:03:15,110 --> 00:03:20,370
The browser leaves an empty space where
the entire image would normally appear.

43
00:03:20,370 --> 00:03:26,400
So no matter how wide or narrow the image
size, the browser will reposition

44
00:03:26,400 --> 00:03:30,240
the image based on the horizontal
space it's taking up on the page.

45
00:03:33,203 --> 00:03:38,463
Just like other functions like skew and
scale you can set both the x and

46
00:03:38,463 --> 00:03:44,120
y axis values at once with
the translate shorthand function.

47
00:03:44,120 --> 00:03:49,874
So, back in my hover rule,
I'll change the translateX function

48
00:03:49,874 --> 00:03:55,210
to translate, and inside the parentheses,
we write the value for

49
00:03:55,210 --> 00:04:00,930
the X axis first, followed by a comma,
and the value for the Y axis.

50
00:04:00,930 --> 00:04:04,640
So let's make the X value 100 pixels, and

51
00:04:04,640 --> 00:04:08,680
the Y value 50 pixels.

52
00:04:08,680 --> 00:04:14,302
These values move the images 100
pixels horizontally on the X axis and

53
00:04:14,302 --> 00:04:16,850
50 pixels vertically on the Y axis.

54
00:04:17,940 --> 00:04:20,920
Now if we go back and
use percentage values, so for

55
00:04:20,920 --> 00:04:26,470
instance I'll make the X value 50% and
the Y value 100%.

56
00:04:26,470 --> 00:04:31,060
These values move the images 50%

57
00:04:31,060 --> 00:04:36,470
horizontally and 100% vertically.

58
00:04:36,470 --> 00:04:43,260
Now keep in mind that if we don't include
a second value inside the parentheses,

59
00:04:43,260 --> 00:04:49,120
the value for y will default to zero or
no translation on that access.

60
00:04:50,130 --> 00:04:53,870
So now it simply moves 50% horizontally.