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 Build a Rotating 3D Cube

Camilo Luna
Camilo Luna
8,836 Points
Posted by Camilo Luna
Camilo Luna
8,836 Points

Aren't classes exchanged?

Since the first image you see is .front and the cube rotates to the left, shouldn't the text be under the class .left, the second image under .right and the third image under .back?

The text, which has the .back class, is at the left in the beginning and at front at the end of the animation.

I find it confusing as it is, though I was able to understand all the code.

1 Answer

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

I found that confusing also. I can almost understand the use of "back", as that's side that is exposed after rotation. But "left" is actually right before rotation, and "right" is actually left after rotation.

Perhaps they were thinking "cube's left" and "cube's right". :smile:

But I'm with you, I'd name them based on the user's view of the starting position.

Camilo Luna
Camilo Luna
8,836 Points
Camilo Luna
Camilo Luna
8,836 Points

I'm glad I'm not the only one Steven! :D