css - 为什么在应用过渡后，图标/链接上的 css 过渡会导致它在错误的位置重绘？

Question

我在确定为什么在将 CSS 过渡应用于图标/链接后它在错误的位置重绘时遇到了问题。

这是它发生的演示:https://jsfiddle.net/9n4edjzc/

div.rotate > a {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
  overflow: hidden;
}
div.rotate > a:hover {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<p>Why do the icons/links redraw in the wrong place after hover?</p>
<div class="rotate"> <a href="http://github.com/"><i class="fa fa-github-square fa-2x"></i></a>	 <a href="http://linkedin.com/"><i class="fa fa-linkedin-square fa-2x"></i></a>
  <a href="http://rssfeed.com/rss"><i class="fa fa-rss-square fa-2x"></i></a> 
</div>

Answer 1

如果链接有图片，则链接必须是 block 元素。

那么您需要容器，因此请妥善放置它们。

但主要要求是将您的链接作为 block 元素。

固定

ul li {
  display: inline-block;
  list-style: none;
}
ul.rotate a {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
  display:block;
  
}
ul.rotate a:hover {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<p>Why do the icons/links redraw in the wrong place after hover?</p>

<ul class="rotate">
  <li>
    <a href="http://github.com/"><i class="fa fa-github-square fa-2x"></i></a>
  </li>
  <li>
    <a href="http://linkedin.com/"><i class="fa fa-linkedin-square fa-2x"></i></a>
  </li>
  <li>
    <a href="http://rssfeed.com/rss"><i class="fa fa-rss-square fa-2x"></i></a> 
  </li>
</ul>