Question

我正在使用一个相当简单的CSS过渡来创建一个盒子，通过同时转换两个div 180deg来“翻转”。当你在盒子的“背面”时，它应该是略微透明的，这样你就可以看到底面。

除了最新的Safari 7和iOS 7之外，我在所有浏览器中相当容易地工作。在Safari 7上，动画闪烁，后卡在动画结束时“弹出”到前面。

这似乎是在较新的Safari上渲染动画的一个错误。是否有一种解决方法可以使其表现得更好？

在Chrome和Safari

上查看动画的GIF动画

在此处查看演示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中测试，所以我可以肯定这是一个解决方案。

Answer 2

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

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

这样你就不必将其旋转回0deg。现在不要翻转正面和背面，只需将整个容器翻转180度，使背面再次呈现“正常”状态。此外，z-index必须在流程中发生变化，这会使backface-visibility: hidden;变得多余。我想如果修改一点，你当然可以使用更少的jQuery。

修改

猜猜Aperçu的答案也几乎就是你想要的。只是为了好玩：http://codepen.io/BenMann/pen/DmjHv

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

Answer 3

正如问题所述，发生了两件事：

<强> 1。动画闪烁：这是由于移动浏览器中的点击延迟造成的。基本上，在物理标记元素后，单击事件会触发300ms。您希望收听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最初也必须翻转才能弥补这一点。

我们还必须在transform-style: preserve-3d上定义.card，以便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/

修改经过进一步测试后，我发现transform: rotateY(180deg)上的.card__front导致Chrome中出现一些闪烁。用transform: scaleX(-1)替换它解决了这个问题。更新了上面的CSS和演示链接，该链接应该适用于移动版Safari和Chrome。

Answer 4

您需要添加两个转换时间，一个用于-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上测试）

使用背面可视性“翻转”盒子时闪烁的背面可见性

4 个答案: