1.css变形

属性值：transform

旋转 rotate，拉伸 shew，缩放 scale，位移 translate，以及矩阵 matrix。
说一下最后一个矩阵 matrix 函数这个函数有6个参数
transform：matrix（a,b,c,d,f,e）
虽然这个函数的参数很多，实际上这些个参数对应的矩阵就是
a c e
b d f
0 0 1
就是这么简单的一个矩阵，那么按照我们的线代知识，这个矩阵和矩阵
x
y
1
这个矩阵相乘得到的就是矩阵就是

ax+cy+e
bx+dy+f
0+0+1
转变后的水平坐标就成了ax+cy+e，垂直坐标就成了bx+dy+f
举个例子：
transform： matrix(1,0,0,1,30,30)
现在我们假定原来的坐标是（0，0），那计算转换后的坐标焦点就成了（30，30），即坐标从（0，0）转换到了（30，30）。简而言之现在的transform： matrix(1,0,0,1,30,30)就相当于transform： translate(30px,30px)，这里值得要注意的地方是 translate，shew，scale，rotate 都是需要写上单位的。总结下来你就会发现 matrix 表现偏移就是 matrix(无关，无关，无关，无关，水平偏移，垂直偏移) 剩下的也就不必多说了，缩放对应的参数是 a和d ，拉伸和旋转涉及到三角函数不想说话，拉伸和旋转其实使用 shew和rotate 比使用 matrix 更为方便。

属性值：transition

该属性包括：
transition-propety ：设置变换的属性名称，默认为all，也可以指定特定的属性变换
transition-duration ：设置过度需要的时间
transition-timing-function ：规定速度效果的速度曲线，默认为ease（规定慢速开始，然后变快，然后慢速结束的过渡效果），其他的还有linear（规定以相同速度开始至结束的过渡效果）ease-in（规定以慢速开始的过渡效），ease-out（规定以慢速结束的过渡效果）和ease-in-out（规定以慢速开始和结束的过渡效果）。
transition-delay ：定义过度效果何时开始

2.css动画

keyframes 介绍

在css3中以@keyframes开始 后面跟上动画名称加{…}动画内容。

animation 属性介绍

animation-name ：要运行的动画名称
animation-during ：设置动画播放时间
animation-timing-function ：设置动画开始方式 （属性值与transition-timing-function相同）
animation-delay ：设置动画延后执行时间
animation-iteration-count ：设置动画的播放次数，通常为整数，如果设置为 infinte则一直循环动画
animation-direction ：设置动画的播放方向，默认值为 normal（每次都是向前播放），如果设置为 alternate （动画播放在第偶数次向前播放，第奇数次向反方向播放）。