Question

我不知所措。

我的HTML页面上有一个齿轮图标，我想像现实世界中的齿轮一样自动旋转。

我创建了一个CSS动画来控制旋转，但是问题是齿轮（而不是自身旋转）会稍微旋转，从而也改变了位置。

这里是我的代码，并链接到代码笔。

<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

Answer 1

您可以通过为其设置ID来旋转图标本身

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

然后将变换原点设置为中心

 #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; 
}

CSS动画使元素360自身旋转，围绕元素自身旋转

1 个答案: