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!

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 Rotating and Scaling SVG

Ilonka Hofmann
Ilonka Hofmann
4,916 Points

SVG rotation is not pivoting from center point with 50% 50% rule

Here is the CSS code from following the video. If you preview the code, you can see it is using the icon centre bottom as the pivot point with the 50% 50% rule:

body { padding-top: 5em; }

svg { width: 33.32%; float: left; }

.gear-icon, .hammer-icon, .heart-icon { transform-origin: 50% 50%; }

/* -------------------------- GEAR --------------------------- */

.gear-icon { transition: transform .4s ease-out; }

.gear:hover .gear-icon { transform: rotate(45deg) scale(1.3); }

/* -------------------------- HAMMER --------------------------- */

.hammer:hover .hammer-icon { transform: rotate(45deg); }

.hammer-icon { transition: transform .3s ease-out; }

/* -------------------------- HEART --------------------------- */

.heart:hover .heart-icon { transform: scale(1.3); }

.heart-icon { transition: transform .2s ease-out; }

4 Answers

What browser are you previewing it in? Firefox does not recognize the 50% 50% for calling out the pivot point (transform-origin property).

Here is the vid where Gil goes over it and the work around https://teamtreehouse.com/library/animating-svg-with-css/transitions-and-transforms/transform-origin-in-firefox

Gari Merrifield
Gari Merrifield
9,597 Points

Unfortunately, it seems that Chrome has gone with the same kind of centering as Firefox, at least in Chromium 64.0. So "50% 50%" method may be a thing of the past...

I found that all icons pivot at the center point in chrome with the code below:

.gear-icon, .hammer-icon, .heart-icon { transform-origin: center 50px 50px; }

I wonder if that means that browsers will no longer render SVGs origin to 0 0 by default and what the new default is