CODEWITHSUNDEEP
svgrotation
Sinéad Cahill
Sinéad Cahill

Reputation: 25

How to rotate part of an svg?

I'm trying to create an svg image where when you hover over part of an image it animates other parts of the image. It's a guitar pedal that when you hover over it, the light goes on and the dials rotate. However I can't figure out how to rotate the dials without the dials shooting off of the pedal. Any help would be much appreciated!!

Here's an example of it:

https://codepen.io/SHINZOC/pen/vYEaooM

    .lo { transition: .1s;}
    .lo:hover {opacity: 0;}
    #Light_off:hover + #Dials {
    transform: rotate(45deg);
    transform-origin: center center;
     }

Upvotes: 0

Views: 100

Answers (1)

Robert Longson
Robert Longson

Reputation: 124249

Change the CSS to

.lo { transition: .1s;}
.lo:hover {opacity: 0;}
#Light_off:hover + #Dials {
transform: rotate(45deg);
transform-origin: center center;
transform-box:fill-box;
 }

since you want to rotate around the fill box and not the view box.

Upvotes: 1

Related Questions