javascript - 在 div 元素上使用 CSS Transform rotateY()

Question

我有一个 div 元素“page”，它包含两个子 div“front”和“back”。我想用 transform rotateY(Ndeg) 做翻页效果。

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

当我拖动页面时，会发生翻转效果..但问题是..它不稳定..有时首页显示，有时背面显示在顶部..我检查了'page'元素并更改了将值旋转 1 度，事实证明在一定程度上正面显示和其他 Angular 背面显示..它只发生在 Chrome 上(在 Firefox 上很好)。 我的预期行为是......例如从左向右翻转:前 90 度显示首页，后 90 度显示后页。不知道这是浏览器的问题还是我错过了任何条件检查...

Answer 1

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

'front' 和 'back' div:-webkit-backface-visibility: hidden;

'页面' div: -webkit-transform-style: preserve-3d;

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

更新:

Simplified CSS-only demo