更改字体真棒图标在悬停时旋转和缩放

Question

I have some static font awesome icons and I would like them each to change with some nice affect when a user hovers over them ie rotate a small bit and also pop out. What is the easiest way to achieve this?

They currently look like this:

My current icons:

 <div class="it-icons">
                  <a target="_blank" href="https://www.linkedin.com/in/craig-whelan-515704196/">
                    <i class="fab fa-linkedin-in"></i>
                  </a>
                  <a target="_blank" href="https://github.com/craig1990">
                    <i class="fab fa-github"></i>
                  </a>
                  <a target="_blank" href="https://stackoverflow.com/users/12231949/darego101">
                    <i class="fab fa-stack-overflow"></i>
                  </a>
                </div>

CSS:

.it-icons a {
  display: inline-block;
  height: 3.5rem;
  width: 3.5rem;
  background-color: #4582EC;
  color: #fff !important;
  border-radius: 100%;
  text-align: center;
  font-size: 1.5rem;
  line-height: 3.5rem;
  margin-right: 1rem;
}

Answer 1

 .it-icons a { display: inline-block; height: 3.5rem; width: 3.5rem; background-color: #4582EC; color: #fff !important; border-radius: 100%; text-align: center; font-size: 1.5rem; line-height: 3.5rem; margin-right: 1rem; transform: scale(1); transition: all ease .3s; } .it-icons a:hover{ transform: scale(1.15) rotate(25deg); }

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="it-icons"> <a target="_blank" href="https://www.linkedin.com/in/craig-whelan-515704196/"> <i class="fab fa-linkedin-in"></i> </a> <a target="_blank" href="https://github.com/craig1990"> <i class="fab fa-github"></i> </a> <a target="_blank" href="https://stackoverflow.com/users/12231949/darego101"> <i class="fab fa-stack-overflow"></i> </a> </div>

Answer 2

You can try doing something like this, it's simple and it's not too flashy. In my opinion there shouldn't be any complicated animations on the site or if there are they should be kept to the minimum. Hope this helps you.

     .it-icons a {
        display: inline-block;
        height: 3.5rem;
        width: 3.5rem;
        background-color: #4582EC;
        color: #fff !important;
        border-radius: 100%;
        text-align: center;
        font-size: 1.5rem;
        line-height: 3.5rem;
        margin-right: 1rem;
        transition: transform 0.5s ease-in-out;
        transition: 1s;
    }

    .it-icons a:hover {
        transform: rotate(360deg);
        background-color: rgb(7, 63, 161);
    }