演示

Question

我在使用简单的3D变换时遇到了麻烦：

当我将光标悬停在任何链接上时，一切顺利，但当我在链接上逐个像素地慢慢移动光标时，悬停变得坚硬，它会在悬停和非悬停之间开始振荡！

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

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

你曾经从事过电子和电路工作吗？曾经听说过钥匙弹跳？当你第一次开始接触时，你有一个条件，你有快速行动的成功/休息/制造。它可以在示波器上看到。如果您正在设计逻辑电路，则必须在硬件或软件中考虑这一点。（想想Arduino，什么不是......）

在这种情况下，鼠标指针的准确性很重要。您是否进入或离开了感兴趣的对象？当您使用鼠标指针越过阈值时，会使用哪些算法来确定您在边界内部还是外部？我猜这是基于浏览器的实现。但你是对的，它看起来不是很动态。

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

更新：我刚刚在我的Mac上检查了Safari，Chrome和Firefox中的同一个jfiddle。 Chrome更加顺畅。 Safari在鼠标关闭模式下具有最佳外观。（你根本看不到块底部的字母......在其他两个浏览器中你只能看到一丝黑白，看起来很奇怪）我认为你受浏览器实现的摆布这里的HTML ...

Answer 2

这解释了为什么它的行为如此：

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

在“Pseudo Elements and Z-index”中我找到了：

（...）你不能在伪上使用动画或过渡元素。这个事实在网上有点记录不清，但确实如此一个重要的。比如说，你想要一个：在伪之后当您将鼠标悬停在其父级上时，该元素会淡入可见性。不幸的是，它会在状态之间捕捉而不是过渡优雅。（...）

这是一种耻辱，因为我必须为此而不是使用: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);
}

演示

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

CSS 3D越野车悬停问题

3 个答案:

更改

演示