在 div 元素上使用 CSS Transform rotateY()答案

【问题标题】：Use CSS Transform rotateY() on a div element在 div 元素上使用 CSS Transform rotateY()
【发布时间】：2013-10-21 03:08:33
【问题描述】：

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

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

当我拖动页面时，会发生翻转效果.. 但问题是.. 它摇摇晃晃.. 有时首页显示，有时后页显示在顶部.. 我检查了“页面”元素并更改了将值旋转一度一度，事实证明，在一定程度的正面显示和其他度数的背面显示......而且它只发生在 Chrome 上（在 Firefox 上很好）。我的预期行为是......例如从左到右翻转：第一个 90 度显示首页，第二个 90 度显示后页。不知道是浏览器的问题还是我错过了任何条件检查...

【问题讨论】：

能否提供其余代码？

标签： javascript css flipboard

【解决方案1】：

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

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

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

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

更新：

Simplified CSS-only demo

【讨论】：

谢谢。我这样做了，并且在从右向左滑动时工作正常。但是当向后翻转（从右到左）时，它总是显示首页..
确保你的 'back' div 在 CSS 中有一个 -webkit-transform: rotateY(180deg)。如果这不起作用，那么提供代码的现场演示以进行故障排除会很有帮助。
rotateY(180deg) 什么时候应该添加css？翻转之后还是之前？
应该在CSS文件的开头。它将确保后面的 div 朝向正确的方向。用于翻页的 JS 应该应用于页面 div 而不是前/后 div。
看来我应该在旋转达到 90 度时进行设置.. 但我不知道如何捕捉旋转 90 度的那一刻