CSS CSS Transitions and Transforms Adding 3D Effects with CSS Create a Flipping Animation with 3D Transform Properties

Am I crazy in thinking the axis directions or backwards for rotateX() and rotateY()?

So, as far as I was tracking, when looking at something such as translateX() and rotateY(), the "X" and "Y" were referring to the their respective axis.

For example, to move something to a different place to the right, you would use translateX(), and use a parameter that when in that direction. Basically, "X" axis functions will move things left and right; side to side.

The translateY() on the other hand would do basically the same thing except things would move UP AND DOWN along the "Y" axis (since the "Y" axis goes up and down).

However, in this video we are using rotateY(), and that is rotating things side to side, when I was expecting them to rotate up and down. When I switch over to rotateX() it of course is the opposite.... It rotates up and down instead of side to side. Why is that so different here and using rotate()?

I just thought of something as I posted this... I may have been thinking of things in a wrong direction completely.

So, using rotateY() told the browser to rotate the image AROUND the "Y" axis. That would make the image itself move in a direction that looks as though it is rotating from left to right when I expected it to because we used the Y axis (like playing Tetherball on a pole that stands straight up). So, is the correct logic behind this is that yes, it is rotating side to side, but its rotating point is the "Y" axis?

I kind of think that that would explain it, especially when I apply the same logic to the rotateX() results that I am getting. The image is rotating up and down, which I thought would be backwards, but its rotating point is the X axis that runs side to side.

All in all, in the rotateX() rotateY() functions, the important thing to focus on is the particular axis its self, correct?

1 Answer

Amber Lim
Amber Lim
4,706 Points

Hi Michael! You answered it yourself! rotateX() rotates an image AROUND the x-axis/horizontally while rotateY() rotates it AROUND the y-axis/vertically. :-)