一个 3D 翻书效果

[16slowly]

借鉴自人人网 FED 的《怎么实现一个3d翻书效果》

主要整理 css3 的 animation 及 transform

最终效果

思路

Dom Stacking Context

参考：https://segmentfault.com/a/1190000014382426

Dom 操作

https://stackoverflow.com/questions/2943140/how-to-swap-html-elements-in-javascript

1. 获取节点：

• querySelector
  • classList: 获取节点上的样式类

// 改写 querySelector
let $ = document.querySelector.bind(document)

// 像使用 jquery $一样使用
$(seletor)

• querySelectorAll
• nextElementSibling
• previousElementSibling

2. DocumentFragment

• 性能探讨：https://www.zhihu.com/question/27260165/answer/35905542

3. 属性处理：

• removeAttribute(attr)
• setAttribute(attr, value)

4. Dom Event

• https://www.smashingmagazine.com/2013/11/an-introduction-to-dom-events/

CSS animation

• animation-name: 动画帧名
• animation-duration: 动画执行时长
• animation-timing-function: 动画速度曲线，支持 Bézier curve (贝塞尔曲线) cubic-bezier()
• animation-delay: 延迟多久开始启动动画
• animation-direction: normal(正常播放) | alternate(反向播放)， 动画是否轮流反向播放。
• animation-fill-mode: forwards(保留动画在最后一个属性值，最后一帧) | backwards(animation-delay 所规定的启动时的属性值将设置为第一帧的样式) | both(同时)
• animation-iteration-count: n | infinite， 动画执行次数。

CSS transform

• transform-style: preserve-3d
• transform-origin: ·left ceter
• transform: scale(x, y)
• transform: translateZ()
• transform: perspective()
• transform: rotateY()

任务管理机制