Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
- Rotating Elements 4:37
- Animating a CSS Transform 4:22
- Skewing Content 3:48
- Scaling Elements 3:12
- Changing the Transform Position with transform-origin 7:01
- Moving Content with translate() 4:55
- Creating a Slide Transition 5:39
- Combining Transforms 3:36
- CSS Transforms Challenge 2 objectives
- Custom Timing Functions with cubic-bezier() 6:43
- Review: Getting Started with CSS Transforms 7 questions
Start a free Courses trial
to watch this video
![](https://videos.teamtreehouse.com/stills/TH-CSS_TransitionsAndTransforms_S3V6-stills-5.jpg?token=698f70d0_830ef68040dfa68ebd92866accf9546a537a9d52)
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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 up-
Ashanti Haring
3,918 Points1 Answer
-
Stephen Limmex
32,695 Points1 Answer
View all discussions for this video
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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