html - RotateY 不会停止闪烁

Question

一定有某种属性影响我的代码，我无法弄清楚，因为当我制作 JSfiddle 时，一切都很好。

问题:我正在尝试对由 :hover 伪元素触发的三个 div 进行 Y 轴转换。出于某种原因，div 不会停止闪烁，我已经尝试了书中的所有技巧，从 -webkit-backface-visibility: hidden; 到闪烁的元素，到 -webkit-transform: translate3D(0, 0, 0); 在父 div 中。没有任何工作。

任何指导将不胜感激，因为我觉得我的代码中的另一个 div 发生了一些奇怪的事情，这会影响徽章并使它们继续闪烁。

我的代码可以在这里找到:http://bmgz.rtcgraphics.com/#4当你点击一个人的脸时，可以找到徽章。

这是我的 JSfiddle 的链接，奇怪的是，它工作正常。 http://jsfiddle.net/sYBYd/1/

任何帮助都将不胜感激!谢谢!!

Answer 1

我注意到当您禁用 #our-team 的 background-image 和 #ot- 的 background-color 时window 然后从 .ot-badge 中清除 -webkit-backface-visibility 将使它们表现得像你的 JSfiddle。所以在过渡期间，两个 2D 表面相互冲突并变得疯狂。我在最前面!不，我在前面!

所以如果你改变这些它应该工作:

.ot-badge { -webkit-transform: translateZ(1px); }
.ot-badge:hover { -webkit-transform: rotateY(180deg) translateZ(-1px); }

并确保删除:

.ot-badge { -webkit-backface-visibility: hidden; }