Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed CSS Transitions and Transforms!
You have completed CSS Transitions and Transforms!
Preview
Now that you're familiar with translations in CSS transforms, you're going to use translateX() to create a slide transition.
Resources
Video review
- CSS transforms are a design-specific feature used to enhance your content.
- Use the translate functions over positioning offsets when you want to move elements on the page for a design-specific reason, like to enhance user interactions.
- CSS positioning offsets are layout-specific properties used to control your layout and the position of your content.
- With a translate function, it's possible to achieve better performance in most desktop and mobile browsers.
- Translate functions can take advantage of a browser feature called hardware acceleration to help the transition run smoother than a transition made with positioning offsets.
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
we're gonna use translate to create
a neat interaction feature using
0:00
the three images on the bottom row.
0:00
For these three images, I've added
a class of slide to the photo wrapper and
0:02
photo overlay containing the image title,
description and
0:08
Download button has an opaque
blue colored background area.
0:12
Now currently, these blue overlays
are positioned on top of the images.
0:17
So, we're not able to see the images yet.
0:21
So, we're going to use
the translateX function to position
0:23
the overlay area out of view and
initially display the image.
0:28
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