Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features
Autoplay

    Move HTML Elements along the X and Y Axes with CSS Translations

    Emma WedekindEmma Wedekind
    cssCSS

    CSS translations are the foundation of CSS animations. They allow you to move, or translate, elements along the X and Y axes. In this lesson, we'll learn how to use the CSS translate functions along with some introductory CSS transitions to smooth out the transformations.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 Here I have my transforms.html file. It contains three sections with each section having a title, a button, and an image of a cat.

    00:08 I have added some JavaScript to this application to ensure our CSS classes and the button labels are appropriately changed when the buttons are clicked.

    00:15 We're going to add three transition functions to the elements on this page. The first transition we'll add is translateX. This moves an element horizontally. When we click the button, a new class, translateX, will be appended to the cat image node.

    00:28 Let's go ahead and add a translateX of a 100 pixels. When we click the button, we can see that the cat moves 100 pixels. When we click it again to reset it, it jumps back. This is because we're appending and removing the translateX class name from the image node.

    00:41 This transformation was a bit sudden, so let's add a transition function. Transition functions make your animations more fluid. They take the CSS property you want to transition, the length of the transition, and the timing function. For our timing function, we'll use ease-in, which starts out slowly and gets faster as the animation progresses.

    00:58 Now let's translate the Y-image. This will follow the same process as X-translation. First, we'll add the transform with the translateY a 50 pixels.

    01:06 Now let's add the transition function on the image. This time, we'll use ease-out, which starts out fast and decelerates as the animation's coming to an end. Now when we click the translateY button, the cat moves down and up.

    01:18 We can also transform with the X- and Y-values simultaneously by using the translate shortcut. This takes the X-transition value first and then the Y-transition value second.

    01:28 Finally, we'll add a transition function of linear, which maintains the same speed throughout the entire transition. When we click the button, the cat moves down and to the right. That's it. Now you know how to use the translate functions.

    Discuss

    Discuss