Transform and Scale Elements in 2D Space with the transform CSS Property

Rotate Elements in 2D with the transform CSS Property

Translate Elements in 2D with the transform CSS Property

Skew Elements in 2D with the transform CSS Property

Change Elements Smoothly and Gradually with the CSS Transition Property

Learn CSS Animations for a Better User Experience 

The transform property in CSS gives you the ability to transform elements in 2D or 3D. 
The most common transforms used to change elements are rotate, skew, translate, and scale.

In this video we will look at translate.

If you want to move an element on the web you use the translate property. 
This property moves an element left and right on the x-axis, up and down on the y-axis or both.

If you want to move an element up you use a negative number on the y-axis. 
This can be confusing when you are first beginning to animate on the web.

Christina Gorton: [0:00] We're going to move the egg on the screen with translate, but first we want to use a transform. We're going to do transform, and then we're going to pick a translate, and you'll see that you can do translate, translateX, translateY are the ones we'll focus on. Translate, and we're going to give this two numbers.

[0:22] The first number is going to be for what's called the X-axis, which goes left and right. The second number is for the Y-axis, which goes up and down. We'll do another 100 pixels here. Both positive numbers right now.

[0:38] Then when we hover, because we have this on the pseudo hover, we're going to see our egg move. It's moving 100 pixels down and 100 pixels over. If we want to move the opposite way, we give this negative numbers. If you want to go up, you give it a negative number. If you want to come the other way, you give it your positive number.

[1:00] You can just move this on one axis at a time. We could do just the translateX and then we can give it a positive number again. We'll do 50 pixels this time, and we'll see that our egg is now moving 50 pixels. We can move the opposite way with a negative number like we did before.

[1:23] Then if we want to move up or down, we do translateY. A negative number again is going to go up which is a little unusual for a lot of people the first few times. Negative number goes up. Positive number will go down.

Course

Learn CSS Animations for a Better User Experience

Translate Elements in 2D with the transform CSS Property

Share this video with your friends