水平对齐中心在navbar-toggle（Bootstrap3）中设置动画“X”图标

Question

我使用此示例http://codepen.io/JulienMelissas/pen/LEBGLj在Bootstrap的导航栏中设置了动画toogle按钮，但transform-origin未居中，我尝试transform-origin: 10% center;但无效。

参见示例（“X”未集中）：

.navbar-toggle .icon-bar {
  width: 22px;
  transition: all 0.2s;
}
.navbar-toggle .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
  opacity: 0;
}
.navbar-toggle .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
  transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
  opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
  transform: rotate(0);
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<div style="width: 320px;"> <!--// Force show mobile menu -->


<nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar top-bar"></span>
          <span class="icon-bar middle-bar"></span>
          <span class="icon-bar bottom-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Default</a></li>
          <li><a href="#">Static top</a></li>
          <li><a href="#">Fixed top</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
</nav>

</div> <!--// Force show mobile menu -->

<div style="height: 600px;"></div>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

在Firefox，Chrome和IE11中：

  

预期结果：

  

如何调整transform-origin以使“X”居中？

Answer 1

您可以将translate添加到转换属性。喜欢这个

transform: translate(3px)rotate(45deg);

和

transform: translate(3px)rotate(-45deg);

翻译在旋转之前，因为顺序很重要。首先向右3px，然后旋转。