为什么 css 上的 icon/link 过渡会导致它在应用过渡后在错误的位置重绘？

Question

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

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

尝试将 display: inline-block; 添加到 div.rotate > a

片段

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;
  display: inline-block;
}
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 2

如果链接有图片，则必须以块元素开头。

然后你需要容器，所以把它们放好。

主要要求是将链接作为块元素。

固定

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>

Answer 3

您需要像这样制作锚内嵌块：

div.rotate > a {
    display: inline-block;
    transition: transform 0.8s;
    overflow: hidden;
}
div.rotate > a:hover {
    -webkit-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>
<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>

这适用于所有当前的浏览器并且符合标准，这与其他仅适用于其中一些浏览器的答案不同。它也更干净。

这可能是更好的方法，如果您不介意更改 HTML:

ul li {
  display: inline-block;
  list-style: none;
}
a.rotate {
    display: block;
    transition: transform 0.8s;
    overflow: hidden;
}
a.rotate:hover {
    -webkit-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>
  <li>
    <a href="http://github.com/" class="rotate"><i class="fa fa-github-square fa-2x"></i></a>
  </li>
  <li>
    <a href="http://linkedin.com/" class="rotate"><i class="fa fa-linkedin-square fa-2x"></i></a>
  </li>
  <li>
    <a href="http://rssfeed.com/rss" class="rotate"><i class="fa fa-rss-square fa-2x"></i></a> 
  </li>
</ul>

为什么 css 上的 icon/link 过渡会导致它在应用过渡后在错误的位置重绘？

Why does css transition on an icon/link cause it to redraw in the wrong place after transition has been applied?

css

font-awesome