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
Samuel Fortunato
20,229 PointsGear icon does not set transform origin properly
I tried setting the .gear-icon class' transform-origin property to 50% 50%, but it seems to set the origin more to the right, as opposed to the center. I had to set the transform origin to 50% 25% to get it to appear center. What gives?
Here is my code:
.gear-icon { transition: transform .4s ease-out; transform-origin: 50% 25%; }
.gear:hover .gear-icon { transform: rotate(45deg) scale(1.3); }
Richie Black
27,272 PointsSame issue, but cannot seem to find a solution online. It has the same problem with the heart and the hammer. You can run
getBBox()
on the g element to get the dimensions and directly plug in the center as
transform-origin:200px 50px;
which also fixes the issue.
10 Answers
Rose Gao
5,914 PointsThe reason is because after this video was made, Chrome updated its code to match the svg specs. Chrome code used to be wrong and allowed you to use 50% 50% to position the transform-origin relative to the element you are setting it on. Firefox has always been correct in this case, making people set it relative to the svg canvas. Now Chrome handles it the same way and 50% 50% is no longer a valid way to set this. The safest way is the answers you came up with above.
Iftekhar Chowdhury
46,829 PointsThe transform-box CSS property defines the layout box to which the transform and transform-origin properties relate.
/* Keyword values */ transform-box: border-box; transform-box: fill-box; transform-box: view-box;
To solve:
.gear-icon { transform-origin: 50% 50%; transform-box: fill-box; }
Julianna Kahn
20,702 PointsWhat an elegant solution, thanks.
melissamyra
Front End Web Development Techdegree Graduate 18,858 PointsSeconding this, adding
transform-box: fill-box;
fixes the off-center issue.
Darryl Le Roux
Front End Web Development Techdegree Graduate 13,672 Points2 years after and it's still not updated in the videos. Nice.
Carlo Hogeveen
10,584 PointsYesterday I reported a severe error in the "CSS rotating cube" lesson and code that students noticed 4 years ago.
Karina Rogers
Front End Web Development Techdegree Graduate 15,908 Points3 years and counting....
Sylvia Castro
9,944 PointsYes! Thanks for the help everyone.
.gear-icon { transition: transform .4s ease-out; transform-origin: 50% 25%; }
.gear:hover .gear-icon { transform: rotate(45deg) scale(1.3); }
This worked perfectly (on Chrome)
Zachary Danz
Front End Web Development Techdegree Graduate 15,024 PointsHere is the code that I used, which also uses the transform origin property that is described in the video. Not sure why the transform origin works at 50% 25% for me, whereas it works at 50% 50% for Guil in the video. Perhaps some changes to Chrome, as others have said?
Anyway, this code works perfectly for me!
.gear-icon{
transition: transform .4s ease-out;
transform-origin: 50% 25%;
}
.gear:hover .gear-icon {
transform: rotate(45deg) scale(1.3);
}
Philip Rusche
8,948 PointsI have the same problem using Firefox. Setting the transform to 50% 25% (or 200px 50px) also fixes it but I can't figure out why. I did find a long discussion of the problem of transform origin on svg elements here:
Mike Macfarland
Front End Web Development Techdegree Graduate 14,770 PointsInteresting that this is still not updated 3 years later, the two solutions above work for me, using: transform-origin: 50% 25%; or applying a transform-box: fill-box;
transform-origin: 50% 50%; but when mousing off of the svg it gives wierd behavior and appears to jump into its box from the bottom.
Remon Jansen of Lorkeers
24,012 PointsAfter looking into this a bit, googling things like "reversing animation" and "css hover off" and trying various things I found that many people had similar problems with animations not reversing properly, and some of them being able to fix it with setting an animation state in the default state (i.e. when it's not hovered), I just ended up trying a couple of random things and it seems writing it the following way seems to solve the issue:
.gear-icon {
transform-origin: 50% 25%;
transition: transform .4s ease-out;
}
.gear:hover .gear-icon {
transform: rotate(45deg) scale(1.3);
}
Don't ask me why this works, because I don't have a clue why, it just works somehow
Larry Rhodes
Front End Web Development Techdegree Student 12,046 PointsGreat solutions! Appears the video hasn't been updated; however, the "fill-box" solution and MDN link was added to the teacher's notes on the following video.
Guadalupe Pena
21,068 PointsThank you guys for the solution! I had to look up the issue under the "Questions" tab in this video. "transform-origin: 50% 25%;" also works for me.
Heidi Fryz
12,299 PointsHeidi Fryz
12,299 PointsI have this same problem using Google Chrome browser. And if I plug in your code it also fixes the problem. But I would like to know what it is not working with the 50% 50%.