1. CSS3 动画浅析
CDG企业发展事业群053在线支付部设计中心页面重构组
lilaczhu(朱雪青)

2. 何为3D？

4. 三围？ 三维？

5. 3D坐标系

6. 3D-哪些基本动作？

8. 基本动作 2D 3D
translate（移动）
rotate（旋转）
scale（缩放）
skew（斜切）

10. DIY一张立体贺卡
材料：卡片两张、剪刀、胶水
效果：卡片主内容像剪纸一样从卡片上翻转起来

11. Step 1
@keyframes flip-in{
0%{transform:rotate ( );}
100%{transform:rotate ( );}
}
X
X
90deg
0deg

13. 没有透视，不成3D

14. perspective：
设置镜头到元素平面的距离
所有元素默认都放置在z=0的平面——即屏幕上
镜头=眼睛

15. 图示1

16. 原图
rotateY(30deg)
perspective:200px
rotateY(30deg)
图示2

17. perspective究竟设多少合适？
1680 * 1.2 ≈ 2000px

18. perspective-origin：
规定镜头在平面上的位置
默认放在元素的中心

19. 图示1：

20. perspective:200px
perspective-origin:150px 150px
rotateY(30deg)
图示2
perspective:200px
rotateY(30deg)
原图

21. Step 2
.card{
perspective:2000px;
perspective-origin:150px 150px;
}

22. 想绕图片的底边线旋转？

23. transform-origin:
动画作用于元素的位置
默认放在元素的中心

24. Step 3
.card-cont{
transform-origin:50% 100%;
}

25. 一叶障目 不见泰山

26. perspective
translateZ

27. 固定 perspective:500px
改变 translateZ：
0 -500px499px
原
始
大
小
渐
远
渐
小
不
见
泰
山
一
叶
障
目
≥500px
消
失
于
视
野

28. 舞台在哪儿？

29. .wrap {perspective:500px;}
.card {transform:rotateY(60deg);}
.card {
transform:perspective(500px) rotateY(60deg);
}
写法2：透视设置每个动画元素上
写法1：透视设在动画元素公共的祖先元素上

30. 写法2视觉效果：
写法1视觉效果：

31.  设在祖先元素上，则以整个祖先元素为舞台，
整体进行透视
 设在动画元素上，则以每个动画元素为舞台，
分别进行透视

32. scaleZ-如何缩放？
scaleX缩放宽度width，scaleY缩放高度height
而元素没有厚度（≈0），scaleZ当如何处理？

33. .card-bg{
transform:translateZ(-200px);
}
.card-bg{
transform:scaleZ(2) translateZ(-100px);
}
=

34. .card {perspective:200px;}
.card-bg {transform:scaleZ(2) rotateY(30deg);}
=
.card {perspective:100px;}
.card-bg {transform:rotateY(30deg);}

35. So……
scaleZ缩放的不是厚度，而是效果

36. 参考资料：
http://www.w3schools.com/css/css3_3dtransforms.asp
http://www.alloyteam.com/2012/10/the-css3-transform-
perspective-property/
http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-
transform-perspective-animate-transition/