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

Posted by Luca Di Pinto
Luca Di Pinto
8,051 Points

Question about transform-origin and translateY

Hi,

which is the purpose of using transform-origin in the cube? When I set transform-origin, the value is associated to which property? I mean that if I set transform-origin on the back side of center right, this value will be centered right about which value??? The front side?? I really have problems to understand it!!!

And about translateY I have already same problems! I understand that for moving the front side towards us the value should be 110px and here I am ok! Looking the front side of the cube, the back side should be the one at our left. So I do not understand how does it move on the Z axis! Doesn't Z axis moves only towards and far away from us??? How can I movean object on Z axis if it is on our left? And how can I know how positive values moves the object in one direction instead of the ones with negative values??

Sorry, I am a bit confused!!

Timothy Huxley
Timothy Huxley
Courses Plus Student 4,781 Points
Timothy Huxley
Timothy Huxley
Courses Plus Student 4,781 Points

I was confused too. I still don't know how to explain it, but try my experiment: 1) Type the code as he had it here for back and front. (don't do left and right yet so you can see.) 2) Then change the angle from 270deg to 20deg then save and refresh to look at the page. Mouse over the animation to see the what is happening. 3) Then try 40deg, then 60deg, then 80 deg so on. You will be able to see how it is flipping on its left side, but 110px back from the page.

transform-origin: center left; is a bit confusing as center is actually for Y axis. Should be: transform-origin: left center;

For me, transform-origin: left; worked by itself.