Skip to main content
Workforce LibreTexts

2.4: 2D CSS Transforms - translate()

  • Page ID
    20579
    \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

    Learning Objectives
    • Gain an understanding of translate() along the X and Y axes.

    2D CSS Transforms - Translate() on the X Axis

    When an object is translated, that means that it is moved from one point to another point along a specific axis.

    Definition: Translate

    The translate() function allows you to transfer an element from one place to another along the X (horizontal) axis and the Y (vertical) axis. This is similar to how you might think of moving an element using offsets, like left, right, up, and down.1

    Original locationNew location

    Figure 1: Translating on the X axis.

    There are two varieties of translate that you will encounter in CSS: the property and the function. When using translate as a CSS property, it will be used as you see below:

    Concept - Translate Property

    selector {

    translate: someValue;

    }

    Notice that "translate" is to the left of the colon in this instance. This is what differentiates it from the translate() function. The "someValue" can be replaced with a size of your choice.

    The translate() function looks like what we have been working with in previous parts of this chapter. You'll see "transform" for the property rather than "translate."

    Concept - Translate() Function on X Axis

    selector {

    transform: translate(someValue);

    }

    The key thing to remember about these two ways of working with Translate is that they both do exactly the same thing. So why have two different ways of working with translation? There must be a difference, right? Correct! There is a difference. That difference comes from the fact that the translate() function does not support working with the Z axis.1

    However, there is a drawback to using the translate property instead of using it as a function of transform. Not all browsers support this feature just yet. To see what browsers do support using the translate property, be sure to check out the "CSS Property: Translate" chart from CanIUse.com.

    Not all browsers support using translate as a property just yet. Use it as a function for now.

    Let's work with the code a bit now.

    Exercise \(\PageIndex{1}\)

    1. Open Chrome and then follow the steps below.

    2. Next, let's use the translate() function. Insert 200px for the value inside of the parentheses and notice what happens.

    3. Then, put -200px as the value inside of the parentheses. The rocket is now sitting off the left hand side of the browser window where you can't see it! This can be useful when you need an object to be 'off stage' before it starts to animate onscreen.

    4. Try a few more locations on your own.

    See the Pen Translate property and translate() function by Rosemary Williams Barker (@rosemary-williams-barker) on CodePen.

    Answers

    2. .rocket {

    transform: translate(200px);

    }

    3. .rocket {

    transform: translate(-200px);

    }


    Translate() on the Y Axis

    To move an object on the Y Axis, you simply specify two, comma-separated values inside of the parentheses of the translate() function. It will look like this:

    Concept - Translate() function on Y Axis

    selector {

    transform: translate(xValue, yValue);

    }

    **The 'xValue' is for the X axis amount and the 'yValue' is for the Y axis amount.

    Let's try this out in the CodePen.

    Exercise \(\PageIndex{2}\)

    1. In Chrome, add transform: translate(0px, 200px); between the two curly braces. Notice how the rocket goes straight down.

    2. Next, change the Y value to -200 px. What happens? Where do you expect it to be? That's right! It moved 200px straight up off screen. (Negative number move objects off screen.)

    3. Play around with a few more positive and/or negative numbers on your own.

    See the Pen Translate property and translate() function by Rosemary Williams Barker (@rosemary-williams-barker) on CodePen.

    Answer

    1. .rocket {
    transform: translate(100px, 200px);
    }

    2. .rocket {
    transform: translate(200px, -200px);
    }


    Footnotes

    1. Coyier, Chris, et al. “Translate: CSS-Tricks.” CSS Tricks, CSS Tricks, 9 Nov. 2021, https://css-tricks.com/almanac/properties/t/translate/.


    This page titled 2.4: 2D CSS Transforms - translate() is shared under a CC BY-NC 4.0 license and was authored, remixed, and/or curated by Rosemary Barker.

    • Was this article helpful?