Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, you'll learn how translations in CSS transforms are similar to relative positioning in CSS layout. With the translateX(), translateY(), and translate() functions, you can move elements sideways on the X axis, or up and down on the Y axis, without affecting the position other elements.
Resources
Video review
- Translation is the process of moving something from one place to another.
-
translateX()changes the horizontal position of an element. -
translateX()moves an element left-to-right, from its original position. - A negative
translateX()value moves an element in the opposite direction. -
translateY()changes the vertical position of an element. - A positive
translateY()value pushes an image down from its original position, while a negative value moves it in the opposite direction. - You can set both the X and Y values at once with the
translate()shorthand. - Inside the parenthesis, write the value for X first, followed by the value for Y.
- If you don't include a second value, the value for Y will default to
0, or no translation on that axis.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
By now you've seen that
transforms have similar behavior
0:00
to relatively positioned elements.
0:04
You can rotate, scale, and
skew elements in different directions
0:06
without interrupting the normal
flow of the document.
0:10
In this video,
you'll learn how translations
0:14
in CSS transforms are also similar to
relative positioning in CSS layout.
0:17
Translation is the process of moving
something from one place to another.
0:22
With the translateX, translateY and
translate functions,
0:28
you can move elements sideways
on the X axis or up and
0:34
down on the Y axis without affecting
the positions of other elements.
0:38
For example, the translateX function
0:42
changes the position of an element
on the horizontal axis.
0:46
So if go back to my style sheet and change
the transform here in the image hover
0:51
rule from rotate, to translateX,
and set the value
0:57
to 150 pixels, once we hover over
an image, notice how the images move
1:06
left to right on the X axis 150
pixels from the original position.
1:11
This is comparable to using the top,
left, bottom,
1:17
and right positioning offsets in
relative and absolute positioning.
1:20
The transformed element repositioned
itself in a similar way.
1:24
So a positive translateX value
1:30
will push an element to the right
of its default position, and
1:33
a negative value pulls the element
to the left of its default position.
1:37
So for instance,
if I change the value to -150
1:41
pixels, the images now pull
to the left by 150 pixels.
1:46
And like the other transforms,
1:53
the original space occupied
by the images remains intact.
1:55
Although you may see the translated
element appear on top of other content
1:59
like we're seeing here,
the new positions created by translateX or
2:04
translateY doesn't actually
affect the surrounding content.
2:09
The translateY function
has the same effect
2:17
except it changes the position of
an element on the vertical axis.
2:20
So let's change translateX to translateY
and set the value to 150 pixels.
2:24
So this pushes an image down 150
pixels from its original position.
2:34
Now a negative value will move
it in the opposite direction.
2:40
So, for instance,
negative 150 pixels pulls an image up.
2:43
From its original position.
2:49
Translate functions can accept any length
unit or a percentage as its value.
2:52
If we use a percentage value,
2:57
the value moves the element
relative to its original position.
2:58
So if I set a translateX of 100%,
3:03
this value pushes an image 100% to
the right of its original space.
3:08
The browser leaves an empty space where
the entire image would normally appear.
3:15
So no matter how wide or narrow the image
size, the browser will reposition
3:20
the image based on the horizontal
space it's taking up on the page.
3:26
Just like other functions like skew and
scale you can set both the x and
3:33
y axis values at once with
the translate shorthand function.
3:38
So, back in my hover rule,
I'll change the translateX function
3:44
to translate, and inside the parentheses,
we write the value for
3:49
the X axis first, followed by a comma,
and the value for the Y axis.
3:55
So let's make the X value 100 pixels, and
4:00
the Y value 50 pixels.
4:04
These values move the images 100
pixels horizontally on the X axis and
4:08
50 pixels vertically on the Y axis.
4:14
Now if we go back and
use percentage values, so for
4:17
instance I'll make the X value 50% and
the Y value 100%.
4:20
These values move the images 50%
4:26
horizontally and 100% vertically.
4:31
Now keep in mind that if we don't include
a second value inside the parentheses,
4:36
the value for y will default to zero or
no translation on that access.
4:43
So now it simply moves 50% horizontally.
4:50
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up