版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sakenc/article/details/87912066
CSS3动画
CSS3在原来的基础上新增了变形和动画相关属性，通过这些属性可以实现以前需要大段JavaScript才能实现的功能。CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换，这样的变换可以控制HTML组件呈现出丰富的外观。
借助于位移、旋转、缩放、倾斜这4种几何变换，CSS3提供了transition动画。transition动画比较简单，只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化，并指定动画时间，就可保证动画播放。
比transition动画功能更强大的是animation动画，animation动画同样可以和位移、旋转、缩放、倾斜这4种几何变换结合，但它可以指定多个关键帧，从而允许定义更加丰富的自定义动画。
CSS3动画----transform变形
transform：该属性用于设置变形，该属性支持一个或多个变形函数。
rotate(angle):该函数用于设置元素旋转的度数.
例如：transform：rotate(30deg);
skew(sx,yx):该函数用于设置元素的一个扭曲效果。
例如：transform:skew(10deg,20deg);
scale(sx,xy):该函数用于设置元素的缩放效果。
translate(tx,ty):该函数用于设置元素的位移。
matrix(m11,m12,m21,m22,dx,dy):该函数是一个基于矩阵变换的函数。前面的4个参数将组成变形矩阵,后面的dx,dy主要是指在坐标轴上的一个偏移量。