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 Animating SVG with CSS Transitions and Transforms Grouping and Transforming SVG

Samuel Fortunato
Samuel Fortunato
20,229 Points

Gear 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); }

I 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%.

Richie Black
Richie Black
27,272 Points

Same 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
Rose Gao
5,914 Points

The 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
Iftekhar Chowdhury
46,829 Points

The 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
Julianna Kahn
20,702 Points

What an elegant solution, thanks.

Seconding this, adding

transform-box: fill-box;

fixes the off-center issue.

2 years after and it's still not updated in the videos. Nice.

Yesterday I reported a severe error in the "CSS rotating cube" lesson and code that students noticed 4 years ago.

Sylvia Castro
Sylvia Castro
9,944 Points

Yes! 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
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Zachary Danz
Front End Web Development Techdegree Graduate 15,024 Points

Here 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);
}

I 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:

https://css-tricks.com/transforms-on-svg-elements/

Interesting 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.

After 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Larry Rhodes
Front End Web Development Techdegree Student 12,046 Points

Great 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.

Thank 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.