1

我有一个 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 度显示后页。不知道是浏览器的问题还是我错过了任何条件检查...

4

1 回答 1

2

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

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

“页面” div：-webkit-transform-style: preserve-3d;

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

更新：

简化的纯 CSS 演示

于 2013-10-13T14:51:51.073 回答