CODEWITHSUNDEEP
csssvgcss-animations
Turner Houghton
Turner Houghton

Reputation: 506

SVG Path rotation animation

I'm trying to get part of my SVG to rotate, but it seems like it's rotating around an extremely large origin, which is confusing because the actual path is incredibly small.

Here is my path element animation css:

.wing1 {
  transform-origin: bottom right;
  animation: spin 6s cubic-bezier(.8, 0, .2, 1) infinite;
  @keyframes spin {
    50% { transform: rotate(45deg); }
    100% { transform: rotate(0deg); }
  }
}

Here is the JSFiddle (with the SVG included): http://jsfiddle.net/c5g3sq4e/

I'm trying to get the wing element to rotate around the bottom right corner so that it looks like it's flying, but I've never done SVG element rotation so I'm not sure that I've specified the origin correctly.

Upvotes: 1

Views: 5179

Answers (1)

enxaneta
enxaneta

Reputation: 33024

You need to add transform-box: fill-box; This will make the object bounding box to be used as the reference box.

.wing1 {
  transform-origin: bottom right;
  transform-box: fill-box;
  animation: spin 6s cubic-bezier(.8, 0, .2, 1) infinite;
  @keyframes spin {
    50% { transform: rotate(45deg); }
    100% { transform: rotate(0deg); }
  }
}

Upvotes: 5

Related Questions