CODEWITHSUNDEEP
csssvgsvg-animate
JonthueM
JonthueM

Reputation: 29

How do I rotate an SVG path element without it moving in circles?

I have an SVG with 3 paths but only needed em to rotate continually. This worked well on an SVG with one path but not with this one and I got a few others that I could like to rotate on a fixed position. Here is the source code with preview!

  .rotate {
  animation: rotation 8s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

Upvotes: 2

Views: 2328

Answers (1)

Kuechlin
Kuechlin

Reputation: 126

you can transform the rotation origin, the default origin is the upper left corner. to rotate a item around its center you have to transform the origin.

.rotate {
    transform-origin: 50% 50%;
    animation: rotation 8s infinite linear;
}

Upvotes: 2

Related Questions