css - 'flipping' 盒子使用背面可见性时背面可见性闪烁

Question

我正在使用相当简单的 CSS 过渡来创建一个框，该框通过同时将两个 div 过渡 180 度来“翻转”。当您在盒子的“背面”时，它应该是稍微透明的，以便您可以看到底部。

除了最新的 Safari 7 和 iOS 7 之外，我已经在所有浏览器中轻松地完成了这项工作。在 Safari 7 上，动画会闪烁，并且背面卡片只是在动画结束时“弹出”到前面。

这似乎是在较新的 Safari 上呈现动画的错误。是否有解决方法可以让它表现得更好？

在 Chrome 上查看动画的 gif 图片和 Safari

在此处查看演示 http://cssdeck.com/labs/flippable-card

Answer 1

无法在 safari 上测试，但 Chrome 中也出现过类似的错误。

这种情况下的解决方案是将 z 向后移动 1px

.card__back { 
    transform: rotateY(180deg) translateZ(1px); 
    backface-visibility: hidden; 
} 

.card--flipped .card__back {
    transform: rotateY(0deg) translateZ(1px); 
}

这发生在 Chrome 中，因为在设置动画时会计算空间顺序(我的意思是元素在 3d 空间中的位置)，并且它会覆盖其他因素。

动画结束后，不再使用该计算系统。

正如我之前所说；无法在 Safari 中进行测试，因此我可以确定这是一个解决方案。