围绕中心旋转图标

debugcn 发表于 Dev

鸡鸡蛋

我想绕着它的中心旋转这个Font Awesome图标，但是我现在的代码没有做到这一点。我认为它的锚点位于右上角。如何将其更改为中心？

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

(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));

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

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

亚伯

我只是把你的代码弄乱了，请在下面检查。并且由于您使用的是FontAwesome图标。您无需真正介意旋转图标，可以向图标本身添加fa-spin类。单击时，可以使图标向左播放。您也可以if statement删除fa-spin该类（如果该类已经在左侧）。

编辑：平滑过渡。我不知道，但似乎无法在摘要中使用，也许可以在浏览器中使用。请让我知道。

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

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

}(jQuery));

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

<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 -->

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。