Question

我有一个div元素'page'，其中包含两个子节点'front'和'back'。我想用变换rotateY（Ndeg）来翻转页面效果。

this.$flippingPage.css({
    '-webkit-transform': 'rotateY(-' + angle + 'deg)',
    '-moz-transform': 'rotateY(-' + angle + 'deg)'
});

当我拖动页面时，翻转效果发生..但问题是..它很不稳定..有时候首页显示，有时后页显示在顶部..我检查了'page'元素并更改了将值旋转一度一度，事实证明，在某种程度上前面显示和其他度数显示..它只发生在Chrome上（在Firefox上很好）。我的预期行为是......例如从左向右翻转：显示前90deg的首页，并显示第二个90deg的后页。不知道这是浏览器的问题，或者我错过了任何条件检查...

Answer 1

这听起来像是背面可见性问题。确保将以下CSS添加到您的div：

'前'和'后'div：-webkit-backface-visibility: hidden;

'page' div：-webkit-transform-style: preserve-3d;

如果将-webkit-perspective: 1000;添加到包装“页面”的任何元素，您将获得更好的3D转换。

<强>更新

Simplified CSS-only demo

在div元素上使用CSS Transform rotateY（）

1 个答案: