CODEWITHSUNDEEP
htmlcssanimationkeyframe
Emmanuel
Emmanuel

Reputation: 129

CSS Animation to rotate element 360 degress on it self, rotates element around itself

I'm at a loss with the following.

I have a cog icon on my HTML page that I want to rotate on itself like a cog in the real world would do.

I have created a CSS animation that controls the rotation but the problem is that the cog instead of rotating on itself slightly rotates around thus changing its position too.

Here my code and link to code pen.

<script src="https://kit.fontawesome.com/c01f624491.js" crossorigin="anonymous"></script>

 <div class="setting">
     <ul class="setting__menu">
        <li><a href="#"><i class="fas fa-cog fa"></i></a></li>
     </ul>
</div>

.setting {
  align-self: flex-end;
  margin-top: -4rem;
  margin-right: -2rem; }
  .setting__menu {
   
    padding: 2rem 1rem;
    border-radius: 20px; }
  .setting li {
    list-style: none;
    margin: 0 5px;
    position: relative; 
}
    .setting li a {
      animation: cog-spin infinite 3s linear;
      animation-duration: 3s;
      animation-timing-function: linear;
      animation-delay: 0s;
      animation-iteration-count: infinite;
      animation-direction: normal;
      animation-fill-mode: none;
      animation-play-state: running;
      animation-name: cog-spin; }
    .setting li a {
      font-size: 1.9rem;
      text-decoration: none;
      color: #00BFA6;
      height: 4.5rem;
      width: 4.5rem;
      padding: 2rem;
      display: block; }

@keyframes cog-spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } 
}

https://codepen.io/Helye23/pen/WNxxbzg

Upvotes: 1

Views: 704

Answers (1)

Kokodoko
Kokodoko

Reputation: 28128

You can spin the icon itself by giving it an id

<i id="cog" class="fas fa-cog fa"></i>

And then set the transform origin to the center

 #cog {
      transform-origin: center;
      animation-duration: 3s;
      animation-timing-function: linear;
      animation-delay: 0s;
      animation-iteration-count: infinite;
      animation-direction: normal;
      animation-fill-mode: none;
      animation-play-state: running;
      animation-name: cog-spin; 
}

Upvotes: 2

Related Questions