Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by Michael Stedman
.a{fill-rule:evenodd;}techdegree
Michael Stedman
Full Stack JavaScript Techdegree Student 13,838 Points

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()?

Michael Stedman
.a{fill-rule:evenodd;}techdegree
Michael Stedman
Full Stack JavaScript Techdegree Student 13,838 Points

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,707 Points
Amber Lim
Amber Lim
4,707 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. :-)