Question

我无法顺利旋转图标，我不确定为什么有人可以提供帮助我会非常感激！

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>

    <!-- style -->
    <style media="screen">
      div{
          background:red;
          width:20px;
          height:60px;
      }
      .rB {
        transform: rotate(180deg);
        transition: all 2s linear;
      }
    </style>
  </head>
  <body>

    <button id="button" type="button" name="button">Rotate</button>
    <i class="fab fa-twitter"></i>
    <div></div>

    <!-- script -->
    <script>
      $(function(){
        $("#button").on('click', function(){
          $(this).siblings().toggleClass('rB');
          });
      });
    </script>
  </body>
</html>

＆＃13;

我添加了一个div https://codepen.io/SalahGfx/pen/yvJqVO

Answer 1

你可以使用css动画来做到这一点

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>

    <!-- style -->
    <style media="screen">
  
      .rB {
        color: #03a9f4;
        animation-name: spin;
        animation-duration: 5000ms;
        animation-iteration-count: infinite;
        animation-timing-function: linear; 
      }
      @keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
    </style>
  </head>
  <body>

    <button id="button" type="button" name="button">Rotate</button>
    <i class="fab fa-twitter"></i>

    <!-- script -->
    <script>
      $(function(){
        $("#button").on('click', function(){
          $(this).siblings().toggleClass('rB');
          });
      });
    </script>
  </body>
</html>

您正在丢失其文档中提到的标记：

请注意如果将标记包装在另一个div中，您将获得与div相同的行为。然而，这将围绕中心旋转，使得你的图标以不太漂亮的方式四处走动，因为div大于图标：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>

    <!-- style -->
    <style media="screen">
      div{
          width:4px;
          height:4px;
      }
      .rB {
        transform: rotate(360deg);
        transition: all 2s linear;
      }
    </style>
  </head>
  <body>

    <button id="button" type="button" name="button">Rotate</button>
    <div class="tester"><i class="fab fa-twitter"></i><div>
    <!-- script -->
    <script>
      $(function(){
        $("#button").on('click', function(){
          $(this).siblings().toggleClass('rB');
          });
      });
    </script>
  </body>
</html>

如何顺利旋转图标？

1 个答案: