Translete an element along the X-axis

Code Feedback
1

Hi,
whilst working on the animation section of the Full Stack course, I came across this page:

It gives the example as:

img {
  transform: translate(150px);
  width: 80%;
}
...
However, the course would only accept the X on the end of translate:
 img {
  transform: translateX(150px);
  width: 80%;
}
 I assume the X is the correct way and the other is an error?

Davie.x
2

The translate() method accepts two values corresponding to x and y axes. When only one value is supplied, the y value defaults to 0.
The translateX() and translateY() methods specifically relate only to their corresponding axes.

So, in effect, translate(150px) is identical to translateX(150px).

1 Like
3

hmm. Perhaps it should be clarified in the CSS Transform Handbook.x

4

if you want you can write to the editorial team (editorial@freecodecamp.org) to suggest this change

2 Likes
5

That’s what I was looking for but couldn’t find a link. Thanks ILM.x

6

Yes, translateX(150px) is the correct way to move an element along the X-axis. translate(150px) is shorthand for translate(150px, 0), but specifying translateX makes it clearer. Good catch!