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}}\)
\( \newcommand{\vectorA}[1]{\vec{#1}} % arrow\)
\( \newcommand{\vectorAt}[1]{\vec{\text{#1}}} % arrow\)
\( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vectorC}[1]{\textbf{#1}} \)
\( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)
\( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)
\( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
- 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.
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
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:
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."
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.
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:
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.
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/.