Rotate multiple SVG layers in different directions using just CSS Hover

Question

I'm attempting to rotate SVG layers in different directions when a user hovers over the image. I can easily rotate the div container but of course this rotates the entire image. I've made a start on the code and hoping that one of you bright sparks familar with SVG animations can help me in the right direction. If possible I'd like to avoid SVG SMIL or JavaScript solutions.

Here is my HTML Code:

<div class="services-one">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="35px" height="35px" viewBox="0 0 35 35" enable-background="new 0 0 35 35" xml:space="preserve">
        <g id="sm_ring">
            <path fill="#F1B91B" d="M17.495,15.592c-0.969,0-1.769,0.727-1.891,1.662H14.1c0.125-1.765,1.596-3.158,3.395-3.158c0.532,0,1.036,0.122,1.483,0.34l-0.75,1.303C18.003,15.645,17.755,15.592,17.495,15.592z"/>
            <path fill="#626363" d="M17.495,19.407c0.26,0,0.508-0.052,0.733-0.147l0.75,1.305c-0.447,0.219-0.951,0.34-1.483,0.34c-1.798,0-3.269-1.394-3.395-3.157h1.504C15.726,18.682,16.526,19.407,17.495,19.407z"/>
            <path fill="#626363" d="M19.402,17.506c-0.01-0.617-0.313-1.16-0.773-1.501l0.732-1.316c0.91,0.599,1.521,1.622,1.537,2.794c0.019,1.173-0.559,2.215-1.449,2.841l-0.773-1.293C19.126,18.675,19.413,18.123,19.402,17.506z"/>
        </g>
        <g id="md_ring">
            <path fill="#F1B91B" d="M17.488,13.011c-2.279,0-4.163,1.709-4.447,3.912l-3.54,0.001c0.296-4.154,3.758-7.434,7.987-7.434c1.253,0,2.438,0.288,3.495,0.802l-1.77,3.065C18.684,13.135,18.102,13.011,17.488,13.011z"/>
            <path fill="#626363" d="M17.488,21.989c0.612,0,1.194-0.124,1.727-0.347l1.77,3.064c-1.057,0.514-2.242,0.802-3.495,0.802c-4.229,0-7.691-3.278-7.987-7.433l3.54-0.001C13.325,20.279,15.209,21.989,17.488,21.989z"/>
            <path fill="#626363" d="M21.979,17.501c0-1.452-0.695-2.741-1.769-3.561l1.772-3.071c2.121,1.441,3.517,3.873,3.517,6.632c0,2.758-1.396,5.188-3.517,6.63l-1.772-3.068C21.282,20.241,21.979,18.951,21.979,17.501z"/>
        </g>
        <g id="lg_ring">
            <path fill="#F1B91B" d="M17.476,7.925c-4.862,0-8.88,3.646-9.488,8.345H0.437C1.068,7.409,8.453,0.413,17.476,0.413c2.674,0,5.204,0.615,7.458,1.71l-3.776,6.54C20.021,8.189,18.779,7.925,17.476,7.925z"/>
            <path fill="#626363" d="M17.476,27.075c1.303,0,2.547-0.263,3.682-0.738l3.775,6.54c-2.254,1.096-4.783,1.71-7.458,1.71c-9.023,0-16.408-6.994-17.039-15.856h7.551C8.595,23.43,12.613,27.075,17.476,27.075z"/>
            <path fill="#626363" d="M27.052,17.501c0-3.095-1.483-5.846-3.77-7.597l3.778-6.549c4.528,3.075,7.502,8.262,7.502,14.146c0,5.883-2.974,11.069-7.5,14.144l-3.78-6.547C25.568,23.346,27.052,20.596,27.052,17.501z"/>
        </g>
    </svg>
</div>

Here is my CSS Code:

.services-one #lg_ring, .services-one #sm_ring, .services-one #md_ring
{
    -webkit-transition-duration:0.8s;-moz-transition-duration:0.8s;-o-transition-duration:0.8s;transition-duration:0.8s;
    -webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;transition-property:transform;
    overflow:hidden;
}

.services-one:hover #lg_ring, .services-one:hover #sm_ring
{
    -webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);
}

.services-one:hover #md_ring
{
    -webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-o-transform:rotate(-360deg);transform:rotate(-360deg);
}

Here is my JSFiddle: http://jsfiddle.net/bcdxmpyc/

The top example is the SVG one that I'm attempting to rotate, I want it too rotate just like example below it, but obviously the rings in different directions! What am I doing wrong?

score 2 · Accepted Answer · edited Mar 01 '15 at 17:09

You need to specify the transform-origin

.services-one {
        width: 100px;    height: 100px;
}
.services-one #lg_ring, .services-one #sm_ring, .services-one #md_ring {
    -webkit-transition-duration:0.8s;
    -moz-transition-duration:0.8s;
    -o-transition-duration:0.8s;
    transition-duration:0.8s;
    -webkit-transition-property:-webkit-transform;
    -moz-transition-property:-moz-transform;
    -o-transition-property:-o-transform;
    transition-property:transform;
    overflow:hidden;
    transform-origin:center center; /* here */
}
.services-one:hover #lg_ring, .services-one:hover #sm_ring {
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    transform:rotate(360deg);
}
.services-one:hover #md_ring {
    -webkit-transform:rotate(-360deg);
    -moz-transform:rotate(-360deg);
    -o-transform:rotate(-360deg);
    transform:rotate(-360deg);
}

<div class="services-one">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 35 35" enable-background="new 0 0 35 35" xml:space="preserve">
        <g id="sm_ring">
            <path fill="#F1B91B" d="M17.495,15.592c-0.969,0-1.769,0.727-1.891,1.662H14.1c0.125-1.765,1.596-3.158,3.395-3.158c0.532,0,1.036,0.122,1.483,0.34l-0.75,1.303C18.003,15.645,17.755,15.592,17.495,15.592z" />
            <path fill="#626363" d="M17.495,19.407c0.26,0,0.508-0.052,0.733-0.147l0.75,1.305c-0.447,0.219-0.951,0.34-1.483,0.34c-1.798,0-3.269-1.394-3.395-3.157h1.504C15.726,18.682,16.526,19.407,17.495,19.407z" />
            <path fill="#626363" d="M19.402,17.506c-0.01-0.617-0.313-1.16-0.773-1.501l0.732-1.316c0.91,0.599,1.521,1.622,1.537,2.794c0.019,1.173-0.559,2.215-1.449,2.841l-0.773-1.293C19.126,18.675,19.413,18.123,19.402,17.506z" />
        </g>
        <g id="md_ring">
            <path fill="#F1B91B" d="M17.488,13.011c-2.279,0-4.163,1.709-4.447,3.912l-3.54,0.001c0.296-4.154,3.758-7.434,7.987-7.434c1.253,0,2.438,0.288,3.495,0.802l-1.77,3.065C18.684,13.135,18.102,13.011,17.488,13.011z" />
            <path fill="#626363" d="M17.488,21.989c0.612,0,1.194-0.124,1.727-0.347l1.77,3.064c-1.057,0.514-2.242,0.802-3.495,0.802c-4.229,0-7.691-3.278-7.987-7.433l3.54-0.001C13.325,20.279,15.209,21.989,17.488,21.989z" />
            <path fill="#626363" d="M21.979,17.501c0-1.452-0.695-2.741-1.769-3.561l1.772-3.071c2.121,1.441,3.517,3.873,3.517,6.632c0,2.758-1.396,5.188-3.517,6.63l-1.772-3.068C21.282,20.241,21.979,18.951,21.979,17.501z" />
        </g>
        <g id="lg_ring">
            <path fill="#F1B91B" d="M17.476,7.925c-4.862,0-8.88,3.646-9.488,8.345H0.437C1.068,7.409,8.453,0.413,17.476,0.413c2.674,0,5.204,0.615,7.458,1.71l-3.776,6.54C20.021,8.189,18.779,7.925,17.476,7.925z" />
            <path fill="#626363" d="M17.476,27.075c1.303,0,2.547-0.263,3.682-0.738l3.775,6.54c-2.254,1.096-4.783,1.71-7.458,1.71c-9.023,0-16.408-6.994-17.039-15.856h7.551C8.595,23.43,12.613,27.075,17.476,27.075z" />
            <path fill="#626363" d="M27.052,17.501c0-3.095-1.483-5.846-3.77-7.597l3.778-6.549c4.528,3.075,7.502,8.262,7.502,14.146c0,5.883-2.974,11.069-7.5,14.144l-3.78-6.547C25.568,23.346,27.052,20.596,27.052,17.501z" />
        </g>
    </svg>
</div>

Transform-origin does not work very well in Firefox and does nothing in Internet Explorer. You can however get around this problem with using the JavaScript libraries svgjs or gsap.

Hey and thanks, sadly using the code you provided does exactly the same thing http://jsfiddle.net/bcdxmpyc/1/ — Simon Hayter, Mar 01 '15 at 15:04
Perhaps you could explain in more detail what the problem is. — Paulie_D, Mar 01 '15 at 15:36
it does explain here: `The top example is the SVG one that I'm attempting to rotate, I want it too rotate just like example below it, but obviously the rings in different directions!` — Simon Hayter, Mar 01 '15 at 15:46
Yep, just tested and can see its not working in Firefox, also doesn't work in Internet Explorer but I expect that, so whats the problem with Firefox then? — Simon Hayter, Mar 01 '15 at 15:52
Well I haven't prefixed the `transform-origin` property so that might be it. Also, I'm not sure that FF & Chrome agree on actual "origin" location so that might be another issue. — Paulie_D, Mar 01 '15 at 15:54
See this article which may provide additional insight [**https://css-tricks.com/svg-animation-on-css-transforms/**](https://css-tricks.com/svg-animation-on-css-transforms/) — Paulie_D, Mar 01 '15 at 15:59
Thanks for your help buddy, I'm now using a gsap method thanks to the article you linked. I've added to your answer at the bottom. You may want to edit what I put ;) thanks again. — Simon Hayter, Mar 01 '15 at 16:58

Rotate multiple SVG layers in different directions using just CSS Hover

1 Answers1