使用 webkit 3d 变换多次触发 CSS 悬停答案

【问题标题】：CSS hover firing more than once with webkit 3d transform使用 webkit 3d 变换多次触发 CSS 悬停
【发布时间】：2014-01-14 15:57:18
【问题描述】：

当我在悬停时使用 webkit 3d 变换时，只有悬停区域的顶部 50% 有效，而底部 50% 则不稳定。我目前正在 Chrome (31.0.1650.63) 上进行测试。这是一个错误吗？有什么解决办法吗？

尝试将鼠标放在 div 的顶部，然后慢慢将其移到底部。

HTML

<div class="hoverArea"></div>
<div class="flip">
    <div class="front">front</div>
    <div class="back">back</div>
</div>

CSS

.hoverArea, .flip, .front, .back {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
}
.hoverArea {
  z-index: 10;
}
.flip {
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
  -webkit-perspective: 800;
  z-index: 9;
}
.front {
  background-color: #f00;
  -webkit-backface-visibility: hidden ;
}
.back {
  background-color: #f0f;
  -webkit-transform: rotatex(-180deg);
  -webkit-backface-visibility: hidden ;
}
.hoverArea:hover + .flip {
  -webkit-transform: rotatex(-180deg);  
}

http://jsfiddle.net/4P53y/

【问题讨论】：

对我来说似乎很好，你能更具体地说明问题是什么吗？
在 chrome 32 中，下半部分可以 100% 工作，而上半部分有问题。
在 V.31 中对我来说很好
在 win8 上为我工作 - 31.0.1650.63
@JoshPowell 当我将鼠标放在 div.hoverArea 的顶部 50% 上时，3d 效果很好，但是当我将鼠标移到 div.hoverArea 的底部 50% 区域时，它一直在疯狂地旋转

标签： css hover transform webkit-transform

【解决方案1】：

您可以通过删除 .hoverArea 元素来修复它，而是将 :hover 事件应用于 .flip 元素。

.flip:hover {
    -webkit-transform: rotatex(-180deg);    
}

Demo

如果您仍想使用.hoverArea 元素，则可以在.hoverArea 上使用transform:translateZ(1px); 以使其正常运行。它使浏览器更仔细地渲染元素

.hoverArea {
    z-index: 10;
    -webkit-transform:translateZ(1px);
}

Demo

【讨论】：

你比我快一分钟。干杯
效果很好，谢谢！我认为如果我 3d 转换自身，悬停行为会搞砸，这就是我使用另一个元素的原因
@AndreFuentes 还添加了一个替代方案，以允许使用 .hoverArea 在您希望它覆盖比 .flip 更多区域的情况下工作