1. Transform 动画
及其在 Timeline 中的应用

2. 概述
• 利用 CSS3 的 transform 属性，可以修改用户的
观察点，让页面元素达到旋转、拉伸、转换、变
形等效果，它包括 2d transform 以及 3d
transform

3. 2D Transform
• 2d transform 提供基于 2D
平面的各种变换，其效果
类似于 PS 中按下 Ctrl+T
后图形的自由变换

4. 2D Transform
• 浏览器兼容性

5. 2D Transform
• transform-origin
• transform
– translate, traslateX, translateY
– scale, scaleX, scaleY
– rotate
– skew, skewX, skewY
e.g.
transform-origin: 50% 50%;
transform: rotate(45deg);

6. 2D Transform
• 在 Timeline 中的应用：
• 浮动发表框在失焦后有个抖动效果，以提示用户
当前仅可以对发表框进行操作

8. 3D Transform
• 在 2D Transform 的基础上增加了 Z 轴，提供具
有 3D 效果的变换

9. 3D Transform
• 浏览器兼容性

10. 3D Transform
• transform-origin
• perspective-origin
• backface-visibility
• transform (new part)
– translate3d, translateZ
– scale3d, scaleZ
– rotate3d, rotateX, rotateY, rotateZ
– perspective

11. 3D Transform
• 在 Timeine 中的应用，头像的 3D 旋转效果

12. 关于动画性能以及优化
• 桢数的选取
• 卡桢现象与优雅降级
• 浏览器的优化 requestAnimationFrame
• 样式动画 CSS3 transition

13. Reference
• http://www.w3.org/TR/css3-2d-transforms/
• http://www.w3.org/TR/css3-3d-transforms/
• http://ie.microsoft.com/testdrive/Graphics/hands-on-c