Moving Content with translate()4:55 with Guil Hernandez
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.
- 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
- 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.
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 up