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

pawkan kenluecha
pawkan kenluecha
26,303 Points
Posted by pawkan kenluecha
pawkan kenluecha
26,303 Points

On the left side, what is the difference between transform-origin : center right and top right ?

Hello , after I inspected the code. I saw the transform-origin property using "top right" for the left side class. I would like to know how it is different than using "center right". I tried using it and I saw the same result here.

2 Answers

Patryk Bernasiewicz
PLUS
Patryk Bernasiewicz
Courses Plus Student 10,281 Points
Patryk Bernasiewicz
Patryk Bernasiewicz
Courses Plus Student 10,281 Points

transform-origin property lets you change the position of the axis your object is getting transformed around. I don't know how to explain it in a simpler way, so I hope this basic pen is going to help you understand it. http://codepen.io/enslavedeagle/pen/ZORpOE

Steven Parker
Steven Parker
231,268 Points
Steven Parker
Steven Parker
231,268 Points

Hey Patryk Bernasiewicz — great visual example! :+1:

But I'd remove that "transform: rotate(20deg);" from the .box rule so it doesn't have that "jump" in the rotation.

Also - any idea why the reference points "wobble"?

Patryk Bernasiewicz
Patryk Bernasiewicz
Courses Plus Student 10,281 Points
Patryk Bernasiewicz
Patryk Bernasiewicz
Courses Plus Student 10,281 Points

Steven Parker yes, good advice about the transform in my example.

And yes, I know why the ref points move during rotation - I've added them just to show where they should belong more-or-less in two different cases, and they're actually NOT positioned exactly at the point of actual transform-origin, just slightly next to it.

Of course, it is possible to make them appear exactly at the transform origin point, but I felt like this was enough just to show what's what. :)

Steven Parker
Steven Parker
231,268 Points
Steven Parker
Steven Parker
231,268 Points

It's good enough as-is for the demo, but it made me want to understand the animation.

I made the wobble stop on the top one — by making the size 6x6 and position at -5,-5, but I was expecting the "sweet" position to be -3,-3. What am I missing?

pawkan kenluecha
pawkan kenluecha
26,303 Points
pawkan kenluecha
pawkan kenluecha
26,303 Points

Thank you for the answer. I got more information from your pen, but it still doesn't clarify my question. I totally understand your point from your link, but I encourage you to download the final version file of this lesson and try to change it to be "center" instead "top". You will see you get the same result.

As per my understanding, because there are 2 properties for transform-origin, the first one affects to Y-axis and second to X-axis. And in the lesson is rotate on Y-axis. In Y-axis, it shouldn't be affected by changing origin point in Y-axis. But in this case, if you rotated X-axis instead, It would be another story.