围绕中心

Question

我想在它的中心周围旋转这个Font Awesome图标，但我现在的代码并没有这样做。我认为它的主播位于右上方。如何将其更改为中心？

我还希望图标在旋转时单击时移动到屏幕中心。

＆＃13;

＆＃13;

(function ($) {
    $(document).ready(function(){

        $('.icon').on('click', function(){
            $(this).toggleClass('icon--active');
        });
        
        var animation = 'rubberBand';

        $('.icon').on('click', function(){
            $(this).addClass('animated ' + animation).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
            $(this).removeClass('animated ' + animation);
            });
        });
    
    });

}(jQuery));

＆＃13;

button:focus {
    outline: none;
}

.icon {
    background-color: rgba(0, 0, 0, 0);
    cursor: pointer;
    position: relative;
    border: none;
    top: 50px;
    left: 1950px;
}

.fa-plus {
    color: white;
}

.icon i {
  display: block;
  position: absolute;
  -webkit-transition: -webkit-transform 0.3s;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

.icon--active{
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
}

＆＃13;

<button class="icon">
  <i class="fa fa-plus fa-3x" aria-hidden="true"></i>
</button><!-- /.icon -->

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试将此添加到您的CSS

 .icon i:after {  
      transform-origin: center
 }

Answer 2

我只是搞砸了你的代码，请查看下面的内容。 因为你正在使用FontAwesome图标。你不需要真的介意旋转图标，你可以在图标本身添加一个类fa-spin。您可以在点击时将图标设置为左侧。您还可以if statement删除fa-spin类（如果它已在左侧）。

编辑：进行平滑过渡。我不知道，但它似乎没有在这里工作的片段，也许它会在浏览器中工作。请告诉我。

＆＃13;

＆＃13;

(function ($) {
    $(document).ready(function(){

        $('.icon').on('click', function(){
            $(this).toggleClass('icon_active fa-spin');
        });
        
    
    });

}(jQuery));

＆＃13;

button:focus {
    outline: none;
}

.icon {
    background-color: rgba(0, 0, 0, 0);
    cursor: pointer;
    position: relative;
    border: none;
    top: 50px;
    left: 150px;
}

.fa-plus {
    //color: white;
  border:1px solid;
}

.icon i {
  display: block;
  position: absolute;
  -webkit-transition: -webkit-transform 0.3s;
  -webkit-transition: all  ease-in-out 0.3s;
  transition: all ease-in-out 1s;
}

.icon_active{
  left:0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="icon">
  <i class="fa fa-plus fa-3x" aria-hidden="true">icon</i>
</button><!-- /.icon -->

＆＃13;

＆＃13;

＆＃13;