记录–怎么实现一个3d翻书效果

一个li.paper就表示一张纸，包含了正反两页，data-left属性表示它是在左边的，而data-right表示是在右侧，通过absolute定位把它们放到相应的位置。所以如果是下一页，应该让data-right做左翻的动画，相反上一页则让data-left做右翻的动画。

.page-1是当前显示在左边的那一页，.page-2表示当前右边的那一页，而.page-1-back和.page-2-back则分别表示在.paeg-1和.page-2后面的那一页。它们置于背后是水平翻转的，这一点应该不难想象，所以需要借助transform: scale水平翻转一下：

.page-1-back, .page-2-back {     transform: scale(-1, 1); }

.page-1, .page-2 {     z-index: 1; }

第二个问题是：为什么.page-2-back没显示出来，仍然显示的是.page-2，猜测是因为.page-2的z-index比较高，把.page-2-back盖住了，所以即使整体rotate属性变了，它也是被盖住的状态。

所以第一个方法可以在翻转一半的时候就把z-index的高低关系互换一下，让page-2-back比page-2更高，但是这个方法不太好控制，因为动画的变化不是linear的，即使是linear的这个方法也不灵活，容易出现闪动的情况。

第二个方法是调整它们俩的translateZ关系，让page-2的translateZ值比page-2-back高1px就可以了，而不是直接设置z-index关系。为了让translateZ能生效，需要设置它们容器的transform-style为preserve-3d，如下代码所示：

.paper {     transform-style: preserve-3d; } .page-1, .page-2 {     transform: translateZ(1px); }

@keyframes flip-to-left {     from {         transform: perspective(1000px) rotateY(0);     }     to {         transform: perspective(1000px) rotateY(-180deg);     } }

停住之后，上面那些类的关系需要重新更新一下，例如翻过来之后原本的.page-2-back会变成.page-1。

比较科学的方法是使用element.animate做动画，因为它有一个onfinish的回调告诉我们动画结束了，动画由于这个API的兼容性不是很好，要么找个polyfill，要么还是用上面CSS的方法然后借助setTimeout。polyfill的库比较大，这里还是用setTimeout模拟动画结束，使用setTimeout的风险是可能会不太准。

代码逻辑比较简单，就是找到对应的dom结点设置对应的类或者属性，就是代码比较繁琐一点，如下所示：

let currentPage = 1; let $ = document.querySelector.bind(document); $('#next-page').addEventListener('click', goToNextPage); const flipAnimateTime = 1000; function goToNextPage () {     // 触发CSS动画     $('.paper[data-right]').setAttribute('data-begin-animate', true);     setTimeout(() => {         // data-right变成data-left         let $rightPaper = $('.paper[data-right]'),             $leftPaper = $('.paper[data-left]');         $rightPaper.removeAttribute('data-right');         $rightPaper.setAttribute('data-left', true);         // data-left没有了         $leftPaper.removeAttribute('data-left');         $leftPaper.querySelector('.page-1').classList.remove('page-1');         $leftPaper.querySelector('.page-1-back').classList.remove('page-1-back');         // 重新设置类的关系         $leftPaper = $rightPaper;         $rightPaper = $leftPaper.nextElementSibling;         $leftPaper.querySelector('.page').classList.add('page-1-back');         $leftPaper.querySelector('.page + .page').classList.add('page-1');         // 如果还有下一页         if ($rightPaper) {             $rightPaper.setAttribute('data-right', true);             $rightPaper.querySelector('.page').classList.add('page-2');             $rightPaper.querySelector('.page + .page').classList.add('page-2-back');         }            currentPage++;     }, flipAnimateTime); }

 但实际上是没有的，这个曲线效果是它添加的阴影和渐变产生的视觉效果，当我们把background-image的渐变去掉之后对比一下就能看出来了：

 没有渐变的伪装之后一下子就平了。它就变成了一个折纸的模型——给定一张纸和一个折过去的点，计算一下折过去的旋转角度和位移。它的源代码是在fold函数里面计算的：

它里面有各种余弦正弦的计算和角度的判断，具体实现还是比较复杂的，没有深入去研究，代码可见turn.js.

还有一个问题是它是怎么实现三角形裁剪展示的效果？它是在上层又盖了一个div：