1.CSS3变形
变形简介
（1）CSS3变形是一些效果的集合，如平移、旋转、缩放、倾斜效果，每个效果都可以称为变形（transform），它们可以操控元素发生平移、旋转、缩放、倾斜等变化。
语法：transform：[transform-function]*；
（1）transform-function：设置变形函数，可以是一个也可以是多个，中间用逗号隔开
①translate（）：平移函数，基于x、y坐标重新定位元素的位置
②scale（）：缩放函数，可以使用任意元素对象尺寸发生变化
③rotate（）：旋转函数，取值是一个度数值
④skew（）：倾斜函数，取值是一个度数值
（2）transform 3D变形函数：translate3d（）平移函数、scale3d缩放函数、rotate3d旋转函数
2D变形的浏览器兼容性
2D变形
（1）2D位移：将元素从一个位置上移动到另一个位置上
语法：translate（tx，ty）;
①tx：横坐标移动的向量长度，正值向右，负值向左
②ty：纵坐标移动的向量长度，正值向下，负值向上
③tx、ty常用单位是px，也可以是百分比
（2）当translate（）函数只有一个值的时候，表示水平偏移；如果只设置垂直偏移，就必须设置第一个参数为0，第二个值是垂直偏移量
2D缩放
（1）scale（）函数能够用来缩放元素的大小，该函数包含两个参数值，分别用来定义宽度和高度的缩放比例，默认值为1,0~0.99都可以缩小，比1大的都可以放大。
（2）当只有一个值时，第二个值默认与第一个值相等。
语法：scale（sx，sy）或scale（sx）
2D倾斜
（1）sked（）函数能够让元素倾斜显示，可将一个对象以其中心位置围绕着x轴和y轴按照一定的角度倾斜
语法：skew（ax，ay）或skew（ax）
括号里的是角度值，单位用deg（°）表示
（2）元素不会旋转，会改变元素的形状
2D旋转
（1）rotate（）函数能够让元素在二维空间里绕着一个指定角度旋转，这个元素对象可以是行内元素也可以是块元素。正值顺时针，负值逆时针
语法：rotate（a）；
（2）只旋转不改变元素的形状
2.CSS3过渡
Transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等
浏览器兼容性
过渡属性的使用
（1）transition属性是复合属性。通过指定属性的初始状态和结束状态在两个状态之间进行平滑过渡的方式来实现动画。
语法：transition：[transition-property transition-duration transition-timing-function transition-delay]
①transition-property：指定过渡或动态模拟的CSS属性
常取值：
A:IDENT：指定的CSS属性（width、height、background-color属性等）
B:all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all
②transition-duration：指定完成过渡所需要的时间，即从设置旧属性到换新属性所花费的时间，单位是s
③transition-timing-function：指定过渡函数，用来指定浏览器的过度速度，以及过渡期间的操作进展情况
常取值：
A:ease：元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐变慢（是默认值）
B:linear：元素样式从初始状态过渡到终止状态时速度恒速，（匀速运动）
C:ease-in：元素样式从初始状态过渡到终止状态时速度越来越快（渐显效果）
D:ease-out：元素样式从初始状态过渡到终止状态时速度越来越慢（渐隐效果）
E:ease-in-out：元素样式从初始状态过渡到终止状态时速度先加快再减速（渐现渐隐效果）
④transition-delay：指定过渡开始出现的延迟时间。指定动画开始执行的时间，也就是说，当改变元素属性值后多长时间去执行过渡效果
A:正值：元素过渡效果不会立即被触发，当过了设置的时间值后才会触发
B:负值：元素过渡效果会从该时间点开始显示，之前的动作被截断
C:0：默认值，元素过渡效果立即执行
过度的触发机制
（1）伪类触发：hover、active、focus、checked等
（2）媒体查询：可以通过@media属性判断设备的尺寸，方向
（3）JavaScript触发：用JavaScript脚本触发
