javascript - 更改 Font Awesome 图标旋转并在悬停时缩放

Question

我有一些很棒的静态字体图标，我希望当用户将鼠标悬停在它们上面时，它们每个都会发生变化，并产生一些不错的效果，即稍微旋转一下，然后弹出。实现这一目标的最简单方法是什么？

他们目前看起来像这样:

我当前的图标:

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