Wednesday - Transform: Translate

Two weeks ago we covered rotational transformations. Unfortunately, too many of you failed to implement that in your code submissions, so we're back to working on transformations again. This time we'll transform an element in translation rather than in rotation. With rotation, we're just spinning an element around its center point. With translation, on the other hand, we're moving the element in a straight line across the screen - usually a very short distance, but you could use this transformation to send elements completely off-screen. The problem is that when setting translation as a hover condition, once the element is no longer under hover it will return to its original position. That's the real reason why you will generally want to keep your translations short, so some part of the element will remain under hover even if the mouse is not moved.

The syntax allows for translation on three axes: X (left and right), Y (up and down), and Z (toward and away). Here are some syntactical options:

1. {transform: translate(1rem 2rem);} - this will slide the element 1 rem to the right and 2 rem down
2. {transform: translateX(1rem);} - this will slide the element 1 rem to the right
3. {transform: translateY(2rem);} - this will slide the element 2 rem down

To make use of the Z axis you need to use translate3d syntax; feel free to play with that if it interests you, but it is not needed for this exercise.

For additional support on transformations, check out Sara Cope's explanation of transformations in CSS at CSS-Tricks. Although CSS-Tricks has better content presentation than W3Schools, I prefer W3Schools for its ability to give you an interface where you can immediately play with code and see the results. I did not like W3Schools' offering on translation, however, so I've linked instead to CSS Tricks this time. Both sites are great for figuring out how to write Web code.