一.CSS3变形
1.变形简介
是一些效果的集合，如平移 旋转 缩放 倾斜 效果，没个效果都可以称为变形。
语法:transform:[transform-function]*;
tranform-function:设置变形函数，可以是一个，也可以是多个，中间用空号分开。
transform():平移函数，基于x,y坐标重新定位元素的位置。
scale():缩放函数，取值是一个度数值。
rotate():旋转函数，取值一个度数值。
skew():倾斜函数，取值一个度数值。
CSS3 3D的变形在括号前加3d 如transform3d()
2.2d变形
1)2d位移
语法:translate(tx,ty);
tx:表示x轴移动的向量长度，如果为正值，表示向x轴右移反之，向左移。
ty:表示y轴移动的向量长度，如果正值，向下，反之，向上
2)2d缩放
语法:scale(sx,sy)
sx:宽度的缩放量
sy:高度的缩放量
3)2d倾斜
语法：skew(ax,ay)
ax:x轴的倾斜方向。
ay:y轴的倾斜方向。
单位用deg(°）表示。
4）2d旋转
语法:rotate(a)
二.CSS3过渡
1.简介
2.过渡属性的使用
transition:[]*;
transition-propery:指定过渡或动态模拟的CSS属性。
transition-duration:指定完成过渡所需的时间。
transition-timing-function:指定过渡函数。
transition-delay:指定过渡开始出现的延误时间
多个使用这些属性用空格分开。
1)过渡属性
transution-property属性用来定义转换动画的css属性名称。
常用取值:
IDENT:指定的CSS属性(width height background-color属性）
all:指定所有元素支持transition-property属性的样式。
2）过渡所需的时间
3）过渡函数
transition-teming-function属性用来指定过渡速度
取值:
ease:元素样式从初始状态过渡到终止状态时速度又快到慢，逐渐变慢(默认值）。
linear:元素样式从初始状态过渡终止状态速度恒速。
ease-in:元素样式从初始状态过渡到终止状态速度愈来愈快(渐显效果）。
ease-out:元素样式从初始状态到终止状态时速度越来越慢(渐阴效果）。
ease-in-out先加速后减速。
4)过渡延误时间
用来指定动画开始执行的时间，也就说，当改变元素属性后多长时间去执行过渡效果。这个时间可以是正值，0，负值。
正值:元素过渡效果不会立即触发，当过了设置的时间值后才会被触发。
负值:元素过渡效果会从该时间点开始显示，之前的动作被截断。
0:默认值，元素过渡效果立即执行。？
3.过渡的触发机制
伪类触发::hover :active :focus :checked
媒体查询:可以通过@media属性判断设备的尺寸 方向等。
JavaScript触发:用JavaScript脚本触发。
三.CSS3动画简介
1.tramsition属性通过指定属性的初始状态和结束状态在两个状态之间进行平过渡的方式来实现动画。
2.animation实现动画主要由两个部分组成。
1）通过类似Flasj动画的关键符声明的动画实现一个更为复杂的动画效果
2）找到要设置动画的元素，并且调用关键帧声明的动画。
设置关键帧
语法:
@keyframes IDNET{
from{样式这里}
percenrage{}
to{}
}
也可以将from和to换成0%和100%
调用关键帧
语法:animation:[];
animation-name动画名称
animation-duration animation-timing-function animation-delay 和前面一样。
animation-ieration-count:表示播放次数 infinite无限次。
animation-direction:动画的播放方向
normal每次向前播放
alternate 偶数次向前 奇数反向
animation-play-state :动画播放状态
running 重新播放
paused 暂停
animation-fill-mode:定义动画开始之前和结束之后发生的操作
forwards表示动画在结束后继续应用最后关键帧的位置，backwards 表示会在向元素应用动画样式时迅速应用动画的初始帧
both表示具有forwards和backwards的值