CSS3简单动画

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 开发工具与关键技术：DW   transform
 作者： 李杨
 撰写时间：2019-01-18 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Css3是css层叠样式表技术的升级版本。
Css3对于css来说就是多了很多的新属性。然后css3很多需要用图片和脚本来实现的效果，现在只需要短短的几行代码就能搞定了。比如变形处理（旋转，缩放，倾斜，移动），动画，图片边框，盒子阴影等。还有选择器这些。

transform的原理比较特殊。从字面上就可以看出来是变形的意思，他的值主要包括 旋转rotate，扭曲skew，缩放scale，移动translate以及矩阵变形matrix 。
CSS3用四个函数可以实现简单的变形用下面的图举个例子原本的位置：

1， translate位移函数：transform：translate（水平方向px，垂直方向px）基本含义就是将一个元素的显示位置平移tx和ty。如图平移后的效果。

2，scale缩放函数：transform：scale（水平方向放大的倍数，垂直方向放大的倍数）将一个元素按指定的倍数进行缩放。缩放两倍后


3，rotate旋转函数：transform：rotate（值deg）将一个元素按指定的角度旋转

4， skew倾斜函数：transform：skew（ax，ay）将一个元素按指定的角度在x轴和y轴上倾斜。倾斜30deg后的效果