CSS三维错误悬停问题

Question

我遇到了一个简单的3D转换问题：

http://jsfiddle.net/2uFuh

当我把光标悬停在任何链接上时，一切都很顺利，但当我慢慢地把光标一个像素一个像素地移动穿过链接时，悬停就变得疯狂了，它开始在悬停和非悬停之间振荡！

我真的不知道它为什么会这样。。。

CSS：

header nav a, header nav a:after, header nav a:before {
  border-radius: 3px;
  display: inline-block;
  padding: 11px 10px 10px 10px;
}
header nav a, header nav a:before {
  background-color: rgb(255, 255, 255);
  color: rgb(51, 51, 51);
}
header nav a {
  position: relative;
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  font-size: 12px;
  line-height: 8px;
  perspective: 9999px;
  -moz-perspective: 9999;;
  -webkit-perspective: 9999px;
  text-decoration: none;
  text-transform: uppercase;
  transform: rotateX(0deg) translateZ(-15px);
  -moz-transform: rotateX(0deg) translateZ(-15px);
  -webkit-transform: rotateX(0deg) translateZ(-15px);
  transform-origin: center center -15px;
  -moz-transform-origin: center center -15px;
  -webkit-transform-origin: center center -15px;
  transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  -webkit-transition: -webkit-transform 0.5s;
}
header nav a:after, header nav a:before {
  position: absolute;
  left: 0px;
  top: 0px;
  content: attr(data-label);
}
header nav a:after, header nav a:hover {
  background-color: rgb(51, 51, 51);
  color: rgb(255, 255, 255);
}
header nav a:after {
  transform: rotateX(-90deg) translateZ(15px);
  -moz-transform: rotateX(-90deg) translateZ(15px);
  -webkit-transform: rotateX(-90deg) translateZ(15px);
}
header nav a:before {
  transform: rotateX(0deg) translateZ(15px);
  -moz-transform: rotateX(0deg) translateZ(15px);
  -webkit-transform: rotateX(0deg) translateZ(15px);
}
header nav a:hover {
  transform: rotateX(90deg) translateZ(-15px);
  -moz-transform: rotateX(90deg) translateZ(-15px);
  -webkit-transform: rotateX(90deg) translateZ(-15px);
}

HTML

<header>
  <nav>
    <a href="#/link-1" data-label="Link #1">Link #1</a>
    <a href="#/link-2" data-label="Link #2">Link #2</a>
    <a href="#/link-3" data-label="Link #3">Link #3</a>
  </nav>
</header>

Answer 1

你从事过电子和电路方面的工作吗？听说过keybounce吗？这是当你第一次开始接触时的一个条件，你必须快速行动。这是你可以在示波器上看到的东西。如果你在设计逻辑电路，你必须在你的硬件或软件中考虑到这一点。（想想Arduino和什么不…）

在这种情况下，鼠标指针的准确性很重要。你是在感兴趣的对象之内还是之外？当你用鼠标指针越过阈值时，会使用什么算法来确定你是在边界内还是在边界外？我猜这是基于浏览器实现的。但你是对的，它只是在动态形式下看起来不太好看

顺便说一句，这是一种非常酷的直接CSS技术。干得好。感谢分享。

更新：我刚刚在mac上的Safari、Chrome和Firefox中检查了相同的jfiddle。铬更光滑。Safari在鼠标关闭模式下具有最佳外观。（你根本看不到块"底部"的字母……在其他两个浏览器中，你只能看到黑色和白色的提示，看起来很奇怪）我认为你受HTML浏览器实现的支配。。。

Answer 2

这解释了它为什么会这样：

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/css3-animations-the-hiccups-and-bugs-youll-want-to-avoid/

在"伪元素和Z索引"中，我发现：

（…）不能在pseudo上使用动画或过渡元素。这一事实在网络上的记录有点糟糕，但一个重要的问题。比方说，您想要一个：after pseudo元素，当您将鼠标悬停在它的父对象上时，它会逐渐变为可见状态。不幸的是，它会在状态之间突然切换，而不是转换优雅地。（…）

这真是太遗憾了，因为我将不得不为此放置元素，而不是使用:before和:after。

Answer 3

派对有点太晚了，但如果有人期待

如果您将鼠标悬停在父元素上，它会以某种方式工作。

更改

所以你的html可能是这样的：

<header>
  <nav>
    <span class="toFocus">
      <a href="#/link-1" data-label="Link #1">Link #1</a>
    </span>
     <span class="toFocus">
     <a href="#/link-2" data-label="Link #2">Link #2</a>
     </span>
      <span class="toFocus">
    <a href="#/link-3" data-label="Link #3">Link #3</a>
    </span>
  </nav>
</header>

css的变化是：

header nav .toFocus:hover a {
  transform: rotateX(90deg) translateZ(-15px);
  -moz-transform: rotateX(90deg) translateZ(-15px);
  -webkit-transform: rotateX(90deg) translateZ(-15px);
}

Demo

http://jsfiddle.net/2uFuh/12/