javascript - 使用 JQuery 旋转元素

Question

我正在创建一个基本布局来测试我的知识。我一直在创建一个菜单，我决定自定义它。每次用户点击它时，我想旋转 90 度由 3 条垂直线组成的图标(此图标仅在智能手机上显示页面时可见 - @media(最大尺寸:968px)。此图标显示菜单当它被点击时。我也通过谷歌搜索阅读了如何做到这一点，但我还没有找到答案。我必须使用 css 还是动画？我可以用旋转方法到达目标吗？你能告诉我正确的方法吗? 我不明白如何使用它们来旋转图标。

$(function(){
  var degree = 45;
    var $buttonNav = $('.header__icon-bar');
  $buttonNav.on('click', function(e){
    e.preventDefault();
    $('.header__nav').toggleClass('is-open');
  });//end of $buttonNav
});//end of the start

/*----------
GENERAL
-----------*/
html,body { height: 100%; width: 100%;margin: 0; padding: 0;}

body{  background: #eee; }


/*----------
HEADER
-----------*/
.header__nav{  display: block; float: right; margin: 0; padding: 20px; background: #333; margin-top: 50px;}
.header__nav__item{ display: inline-block; margin: 0; }
.header__nav__item a {padding: 30px; padding: 20px; margin: 0; color: white; text-decoration: none;}
.header__nav__item a:hover { background: #ff3333; }






/*----------
icon-bar
-----------*/
.header__icon-bar{ margin: 0; padding: 10px; background-color: #333; float: left; display: none;}
.header__icon-bar span { padding: 3px 1px; margin: 3px ; background-color: white;}
.header__background{display: none; height: 0px; background-color: #333; margin: 0;}

@media(max-width: 960px) {
  /*header-Menu*/
.header{ width: 100%; padding: 0; margin: 0;}
.header__nav{ width: 100%; overflow: hidden; height: 0px; margin: 0; padding: 0;  mar}
.header__nav__item { display: block; padding: 20px; margin: 0;}
.header__nav__item a{ width: 100%;padding-right: 100%;}

.is-open{ display: block; height: 255px; background: #333; display: block; margin: 0;}

/*button of spaun menu(nav)*/
.header__icon-bar{ display: block;margin-top: 10px; margin-left: 10px; float: left;}
.header__background{display: block; background-color:#333; height: 60px; width: 100%}





}

























*/
/*----------
CLEARFIX
-----------*/
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header clearfix">
   <div class="header__background">

   <a class="header__icon-bar" href="">
      <span></span>
      <span></span>
      <span></span>
  </a>
</div>


    <ul class="header__nav">
      <li class="header__nav__item">  <a href="#"> Home    </a> </li>
      <li class="header__nav__item">  <a href="#"> Contact </a>    </li>
      <li class="header__nav__item">  <a href="#"> Apply   </a>    </li>
      <li class="header__nav__item">  <a href="#"> About   </a>    </li>
    </ul>


 </header>

Answer 1

这可以通过 CSS3 的转换来实现。

$(function(){
  var degree = 45;
    var $buttonNav = $('.header__icon-bar');
  $buttonNav.on('click', function(e){
    e.preventDefault();
    $('.header__nav').toggleClass('is-open');
    $('.header__icon-bar').toggleClass('rotate90')
  });//end of $buttonNav
});//end of the start

.rotate90 {
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
  transform: rotate(90deg);
}


/*----------
GENERAL
-----------*/
html,body { height: 100%; width: 100%;margin: 0; padding: 0;}

body{  background: #eee; }


/*----------
HEADER
-----------*/
.header__nav{  display: block; float: right; margin: 0; padding: 20px; background: #333; margin-top: 50px;}
.header__nav__item{ display: inline-block; margin: 0; }
.header__nav__item a {padding: 30px; padding: 20px; margin: 0; color: white; text-decoration: none;}
.header__nav__item a:hover { background: #ff3333; }






/*----------
icon-bar
-----------*/
.header__icon-bar{ margin: 0; padding: 10px; background-color: #333; float: left; display: none;}
.header__icon-bar span { padding: 3px 1px; margin: 3px ; background-color: white;}
.header__background{display: none; height: 0px; background-color: #333; margin: 0;}

@media(max-width: 960px) {
  /*header-Menu*/
.header{ width: 100%; padding: 0; margin: 0;}
.header__nav{ width: 100%; overflow: hidden; height: 0px; margin: 0; padding: 0;  mar}
.header__nav__item { display: block; padding: 20px; margin: 0;}
.header__nav__item a{ width: 100%;padding-right: 100%;}

.is-open{ display: block; height: 255px; background: #333; display: block; margin: 0;}

/*button of spaun menu(nav)*/
.header__icon-bar{ display: block;margin-top: 10px; margin-left: 10px; float: left;}
.header__background{display: block; background-color:#333; height: 60px; width: 100%}





}

























*/
/*----------
CLEARFIX
-----------*/
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header clearfix">
   <div class="header__background">

   <a class="header__icon-bar" href="">
      <span></span>
      <span></span>
      <span></span>
  </a>
</div>


    <ul class="header__nav">
      <li class="header__nav__item">  <a href="#"> Home    </a> </li>
      <li class="header__nav__item">  <a href="#"> Contact </a>    </li>
      <li class="header__nav__item">  <a href="#"> Apply   </a>    </li>
      <li class="header__nav__item">  <a href="#"> About   </a>    </li>
    </ul>


 </header>