变形：
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
元素的变形：transform
transform:none | <transform-function>
none：默认值，不设置变形
<transform-function>：设置变形函数，如旋转rotate()、缩放scale()、移动translate()、倾斜skew()、矩阵变形matrix()。
代码：
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>动画之简单变化</title>
6 <style type="text/css">
7 ul {
8 margin-top: 30px;
9 list-style: none;
10 line-height: 25px;
11 font-family: Arial;
12 font-weight: bold;
13 }
14 li {
15 width: 120px;
16 float: left;
17 margin: 2px;
18 border: 1px solid #cccccc;
19 background-color: #e4e4e4;
20 text-align: left;
21 }
22 li:hover {
23 background-color: #999999;
24 }
25 a {
26 display: block;
27 padding: 5px 10px;
28 color: #333333;
29 /*text-decoration 属性规定添加到文本的修饰。如下划线等*/
30 text-decoration: none;
31 /*定义原点 */
32 transform-origin:0 0;
33 }
34 li:nth-child(1):hover a{
35 background-color: #f90;
36 /*字体颜色 */
37 color: #FF3321;
38 /*旋转 */
39 transform:rotate(30deg);
40 }
41 li:nth-child(2):hover a{
42 background-color: #f90;
43 /*字体颜色 */
44 color: #FF3321;
45 /*移动 */
46 transform:translate(5px,5px);
47 }
48 li:nth-child(3):hover a{
49 background-color: #f90;
50 /*字体颜色 */
51 color: #FF3321;
52 /*缩放 */
53 transform:scale(0.8,1.5);
54 }
55 li:nth-child(4):hover a{
56 background-color: #f90;
57 /*字体颜色 */
58 color: #FF3321;
59 /*倾斜 */
60 transform:skew(30deg);
61 }
62 </style>
63 </head>
64 <body>
65 <ul>
66 <li><a href="#">html 5</a></li>
67 <li><a href="#">css 3</a></li>
68 <li><a href="#">flash</a></li>
69 <li><a href="#">ps</a></li>
70 </ul>
71 </body>
72 </html>
旋转：rotate(<angle>)
angle：旋转角度，代为deg，正值顺时针，负值逆时针。
缩放和翻转：scale(<x>,<y>)
<x>：水平方向放大倍数
<y>：垂直方向放大倍数
注释：中间用逗号隔开数值，大于1表示放大，小于1表示缩放。为负数表示翻转。如果y值省略，会水平方向和垂直方向上放大或缩放相同倍数。
移动：translate(<dx>,<dy>)
<dx>：元素在水平方向上的偏移距离
<dy>：元素在垂直方向上的偏移距离
注释：<dx><dy>可为负值或带小数的的值。偏移方向不解释。若<dy>的值省略，则垂直偏移距离为0
倾斜：skew(<x-angle>,<y-angle>)
<x-angle>：元素在空间x轴上的倾斜角度
<y-angle>：元素在空间y轴上的倾斜角度
注释：<x-angle><y-angle>单位deg，值为正，顺时针，值为负，逆时针。若<y-angle>值省略，则在垂直方向上的倾斜角度为0deg
矩阵变形：省略吧先，以后研究。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
代码：
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>过渡效果</title>
6 <style type="text/css">
7 div {
8 margin: 100px auto;
9 width: 200px;
10 height: 100px;
11 background-color: #00f;
12 /*总写 */
13 /*transition:all 1000ms linear 500ms;*/
14 /*分写 */
15 transition-propety:all;
16 transition-duration:1s;
17 transition-dely:0.5s;
18 transition-tinming-funtion:liner;
19 }
20 div:hover {
21 background-color: #f90;
22 transform:rotate(200deg);
23 }
24 </style>
25 </head>
26 <body>
27 <div></div>
28 </body>
29 </html>
定义变形原点：transform-origin
transform-origin:<x> <y>
<x>：定义变形原点的x位置
<y>：定义变形原点的y位置
注释：<x>默认值是50%，取值包括left、center、right、百分比值，长度值
<y>默认值是50%，取值包括top、middle、bottom、百分比值、长度值
过渡效果：transition：transition-property | transition-duration | transition-timing-function | transition-delay
transition-property：定义过渡属性
none：没有过渡效果
all：默认值，所有的css属性都有过渡效果
<property>：指定一个用逗号分隔的多个属性，针对指定的这些属性有过渡效果
transition-duration：定义过渡过程的需要的时间
<time>：时间可以是秒或毫秒，默认是0
transition-timing-function：定义过渡方式
linear：一直是同一速度
ease：先慢，再快，最后非常慢
ease-in：先慢，再快，直至结束
ease-out：先快，再慢，直至结束
ease-in-out：在开始和结束时，都很慢
cubic-bezier(n,n,n,n)：自定义贝塞尔曲线，参数为0到1的数字。
transition-delay：定义开始过渡的延迟时间
<time>：同transition-duration中的<time>