2

我在进行简单的 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>
4

3 回答 3

0

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

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

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

(...) 您不能在伪元素上使用动画或过渡。这个事实在网络上的记录有点差，但它是一个重要的事实。例如，假设您希望 :after 伪元素在您将鼠标悬停在其父元素上时淡入可见。不幸的是，它会在状态之间快速切换，而不是优雅地转换。(...)

太可惜了，因为我不得不为此放置元素，而不是使用:beforeand :after。

于 2013-08-16T21:34:52.347 回答
0

Have you ever worked on electronic and circuitry? Ever hear of keybounce? Its a condition when you first start to make contact, you have make/break/make in fast action. Its something you can see on an oscilloscope. If you are designing logic circuits you have to take that into account in your hardware or software. (Think Arduino and what not...)

In this case, the accuracy of the mouse pointer matters. Are you in or out of the object of interest? When you cross a threshold with the mouse pointer, what algorithms are used to determine wither you are inside or outside the boundary? I'm guessing that is based on the browser implementation. But you are right, it just doesn't look pretty in dynamic form.

By the way, that's a very cool technique for straight CSS. Nice work. Thanks for sharing.

Update: I just checked the same jfiddle in Safari, Chrome and Firefox on my mac. Chrome is MUCH smoother. Safari has the best appearance in mouse off mode. (you can NOT see the letters on the 'bottom' of the block at all... in the other two browsers you can just see a hint of black and white, looks odd) I think you are at the mercy of the browser implementations of HTML here...

于 2013-08-16T00:49:06.540 回答
0

派对有点太晚了，但以防万一有人期待这个......

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

变化

所以你的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/

于 2018-03-13T22:27:11.663 回答