Chicky Egg Chicky Egg - 5 months ago 15
CSS Question

Rotate icon around center

I want to rotate this Font Awesome icon around its centre but the code i have now doesn't do that. I think it's anchor is at the top right. How do I change it to the centre?

I also want the icon to move to move to the centre of the screen when on click as its rotating.



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




Answer

I just messed around you code, pls check below. and since you're using FontAwesome icon. you dont need to really mind with rotating the icon, you can add a class fa-spin to the icon itself. You can play with making the icon to left when clicked. you can also make an if statement to remove the fa-spin class if its already in the left.

edit: for smooth transition. i dont know but it seems not working here in the snippet, maybe it'll work in the browser. pls let me know.

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

Comments