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.
You need to sign up for Treehouse in order to download course files.Sign up