使用背面可见性“翻转”框时闪烁的背面可见性

Question

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

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

这似乎是在较新的 Safari 上呈现动画的错误。有没有办法让它表现得更好？

查看Chrome和Safari上的动画GIF

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

Answer 1

您需要添加两个转换时间，一个用于-webkit-backface-visibility，另一个用于-webkit-transform。

如果您尝试将过渡延迟设置为 0 秒，您将立即看到颜色变化，如您所愿。

尝试修改您的转换规则，例如

transition: -webkit-transform 1s ease-in-out, -webkit-backface-visibility 0s ease-in-out;

或仅针对背面可见性覆盖 1 秒过渡。

编辑

不使用看起来有问题的-webkit-backface-visibility，我想我可以使用背卡的display。

参见 Demo（在 Safari 7 iOs 7.0.2 和 Mavericks 上测试）

Answer 2

所以我设法在我当前的 Safari 中复制了这种行为，并认为这很有趣。 这是我想出的： http://codepen.io/anon/pen/usGCL

基本上，从一开始，背面就已经通过-webkit-transform: scaleX(-1); 转过来了。

这样您就不必将其旋转回 0 度。 现在不是前后翻转，您只需将整个容器翻转 180 度，让背面再次出现“正常”。此外，z-index 必须在此过程中更改，这使得 backface-visibility: hidden; 变得多余。我想如果稍微修改一下，你当然可以使用更少的 jQuery。

编辑

Guess Aperçu 的答案也正是您想要的。 不过只是为了好玩：http://codepen.io/BenMann/pen/DmjHv

我同意背面可见性肯定会导致问题。

Answer 3

正如问题中提到的，发生了两件事：

1.动画闪烁：这是由于移动浏览器中的点击延迟。基本上，单击事件会在物理地对元素进行标记后 300 毫秒触发。你会想收听touchstart，它会在标签页上立即触发，但在非触摸界面上根本不会触发（Fastclick 是一个很好的 polyfill，它可以消除移动浏览器中的这种点击延迟，但不会影响非触摸式 UI。）

为了这个答案，我只是将我的听众绑定到touchstart而不是click（因此，演示将在触摸设备上查看）：

$('.card').on("touchstart", function() {
  $(this).toggleClass('card--flipped');
});

2。后卡在动画结束时“弹出”到前面：经过一些实验，似乎当transform 和backface-visibility 都定义在同一个元素上时会发生这种情况。为了解决这个问题，我将backface-visibily 保留在.card__back 上，但将transform: rotateY(180deg) 放在.card__front 上。

因此，.card__front 最初将被翻转，这意味着 .card 也必须最初翻转以弥补这一点。

我们还必须在.card 上定义transform-style: preserve-3d，以便transform 在3D 空间中渲染.card__front 和.card__back（而不是被展平）。

/* Relevant CSS */

.card {
  transition: all 1s ease-in-out;
  transform-style: preserve-3d;
  transform: rotateY(-180deg);
}

.card__front {
  transform: scaleX(-1);
}

.card__back {
  backface-visibility: hidden;
}

.card--flipped {
  transform: rotateY(0);
}

移动端演示（在移动端 Safari 或 Chrome 中查看）： http://jsbin.com/aMAwezA/15/

DEMO（适用于非触控设备）： http://jsbin.com/aMAwezA/16/

编辑： 经过进一步测试，我发现.card__front 上的transform: rotateY(180deg) 导致Chrome 出现一些闪烁。用transform: scaleX(-1) 替换它解决了这个问题。更新了上面的 CSS 和演示链接，它应该可以在移动 Safari 和 Chrome 上运行。

Answer 4

无法在 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 中测试，所以我可以确定这是一个解决方案。