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

Ilonka Hofmann
Ilonka Hofmann
4,916 Points
Posted by 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

Shawn Denham
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,802 Points
Shawn Denham
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,802 Points

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,598 Points
Gari Merrifield
Gari Merrifield
9,598 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...

Mark Mangunda
Mark Mangunda
16,652 Points
Mark Mangunda
Mark Mangunda
16,652 Points

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

Yanko Delchev
Yanko Delchev
11,976 Points
Yanko Delchev
Yanko Delchev
11,976 Points

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