在 link 上使用 CSS 变换时不稳定

Question

我有页脚导航。导航是一个无序列表，有六个列表项，每个列表项都有一个锚点或 link 标签。

现在我的问题是，当我将鼠标悬停在基本上是 link 的列表项上时（根据 CSS 代码在 Y 轴上翻译 -3px -->）但是当它回到 link 或正常状态 link 文本上下移动。

是什么导致了这种异常行为？

我对 CSS 和 HTML 的体验很新鲜。

我在某处读到过（背面可见性：隐藏；）但不知道如何使用它以及在哪里使用它可以以某种方式解决这个问题，但正如我之前所说，我从 CSS 开始有点困惑它是如何工作的。

.nav {
  list-style: none;
  padding: 4rem;
  background-color: #101d2c;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-gap: 2rem;
  align-items: center;
}

.nav__link:link,
.nav__link:visited {
  text-decoration: none;
  font-size: 1.4rem;
  font-family: 'Josefin Sans', sans-serif;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  padding: 1.5rem;
  display: block;
  transition: all .2s;
}

.nav__link:active,
.nav__link:hover {
  background-color: rgba(#fff, .05);
  transform: translateY(-3px);
}

<ul class="nav">
  <li class="nav__item"><a href="#" class="nav__link">Find your dream home</a></li>
  <li class="nav__item"><a href="#" class="nav__link">Request proposal</a></li>
  <li class="nav__item"><a href="#" class="nav__link">Download home planner</a></li>
  <li class="nav__item"><a href="#" class="nav__link">Contact us</a></li>
  <li class="nav__item"><a href="#" class="nav__link">Submit your property</a></li>
  <li class="nav__item"><a href="#" class="nav__link">Come work with us!</a></li>
</ul>

Answer 1

我无法向您解释为什么 CSS 转换不流畅，但这是我发现自己每天都在网上注意到的一个常见问题。 CSS 有许多奇怪的错误和缺陷，这就是其中之一。

这里有一个解决您的问题的方法，这样您至少可以在没有不稳定文本的情况下实现您想要的效果：

删除 css 变换并添加负上边距：

.nav__link:active,
.nav__link:hover {
  background-color: rgba(#fff, .05);
  transform: translateY(-3px); <-- remove this line
  margin-top: -6px; <-- add this line
}

我使用了 6px 的负上边距 (-6px)，因为这看起来非常类似于使用 css 转换翻译的 3px。

https://codepen.io/anon/pen/yZweLp?editors=1100#0

Answer 2

我不知道为什么，但当我遇到那个问题时，我使用 backface-visibility: hidden; 通常可以解决问题。

在 link 上使用 CSS 变换时不稳定

Shaky when using CSS transform on link

html

css

css-transforms