CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
Chicky Egg
Chicky Egg

Reputation: 153

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

Upvotes: 2

Views: 3243

Answers (2)

zuuul
zuuul

Reputation: 372

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

Upvotes: 1

Pixelomo
Pixelomo

Reputation: 6737

Try adding this to your CSS

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

Upvotes: 1

Related Questions