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 trialpawkan kenluecha
26,303 PointsOn 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
Courses Plus Student 10,281 Pointstransform-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
pawkan kenluecha
26,303 PointsThank 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.
Steven Parker
231,198 PointsSteven Parker
231,198 PointsHey Patryk Bernasiewicz — great visual example!
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
Courses Plus Student 10,281 PointsPatryk Bernasiewicz
Courses Plus Student 10,281 PointsSteven 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
231,198 PointsSteven Parker
231,198 PointsIt'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?