一、设计2D变换
transform：none | <transform-function> [<transform-function>]*
<transform-function>设置变化函数。
常用的变换函数的功能如下：
matrix()：定义矩阵变换，即基于X和Y坐标重新定位元素的位置
translate()：移动元素对象，即基于X和Y坐标重新定位元素
scale()：缩放元素对象，取值包括正数、负数和小数
rotate()：旋转元素对象，取值为一个度数值
skew()：倾斜元素对象，取值为一个度数值
1）定义旋转
rotate(<angle>)
2）定义缩放
scale(<number>[,<number>])
number取值正数将放大元素，负数将翻转元素（如文字反转），使用小于1的小数可以缩小元素
3）定义移动
translate（<translation-value>[,<translation-value>])
translation-value参数表示坐标值，第一个参数相对于原位置的x轴偏移距离，第二个参数相对于y轴偏移距离
4）定义倾斜
skew(<angle>[,<angle>])
<angle>表示角度值，第一个参数表示相对于x轴进行倾斜，第二个参数表示相对于y轴进行倾斜。
5）定义矩阵
matrix(<number>,<number>,<number>,<number>,<number>,<number>)
矩阵函数可以实现各种变换效果，如：倾斜（skew）、缩放（scale）、旋转（rotate）、以及位移（translate）。
其中第1参数控制x轴缩放，第2个参数控制x轴倾斜，第3个参数控制y轴倾斜，第4个参数控制y轴缩放，第5参数控制x轴移动，第6参数控制y轴移动。
ps：transform是一个复合属性transform:translate(80,80) rotate(45deg) scale(1.5,1.5)
6）定义变换原点
CSS变换的原点默认为对象的中心点，如果想改变这个中心点，可以使用transform-origin属性进行定义。
transform-orgin属性可以接受两个参数，可以百分比，具体值，也可以是left、center、right或者top、middle、bottom。
二、设计3D变换
CSS3的3D变换包括以下几个函数
3D位移：translateZ（t）和translate3d（tx,ty,tz）函数
3D旋转：rotateX（a）、rotateY（a）、rotateZ（a）和rotate3d（x,y,z,a）
3D缩放：scaleZ（s）和scale3d（sx,sy,sz）函数
3D矩阵：包含matrix3d（）函数
1）定义位移
translate3d(tx,ty,tz)
tx：代表横向坐标位移向量的长度
ty：代表纵向坐标位移向量的长度
tz：代表Z轴位移向量的长度。此值不能为百分比
translateZ函数translateZ(t)，t为Z轴向量位移长度
2）定义缩放
scale3d(sx,sy,sz)和scaleZ(s)取值为比例值
3）定义旋转
rotate3d（x,y,z,a）x,y,z是一个0~1的数值
a是一个角度值
三、设计过渡动画
1）设置过渡属性（定义过渡动画的CSS属性名称）
transition-property:none | all | [<IDENT>][',' <IDENT>]*
none：表示没有元素
all：默认值，表示针对所有元素，包括：before和：after伪元素
IDENT：指定CSS属性列表。
2）设置过渡时间
transition-duration:<time>[,<time>]*
默认值为0，看不到过渡效果
3）设置延迟时间
transition-delay:<time>[,<time>]*
4）设置过渡动画类型
transition-timing-function属性用来定义过渡动画的类型
初始值为ease，取值简单说明如下：
ease：平滑过渡，等同于cubic-bezier（0.25，0.1，0.25，1.0）函数，即立方贝塞尔
linear：线性过渡，等同于cubic-bezier（0.0，0.0，1.0，1.0）函数
ease-in：由慢到快，等同于cubic-bezier（0.42，0，1.0，1.0）函数
ease-out：由快到慢，等同于cubic-bezier（0，0，0.58，1.0）函数
ease-in-out：由慢到快再到慢，等同于cubic-bezier（0.42，0，0.58，1.0）函数
cubic-bezier：特殊的立方贝塞尔曲线效果
5）设置触发方式
CSS3动画一般通过鼠标事件或状态定义动画，如CSS伪类和Javascript事件
| 动态伪类 | 作用元素 | 说明 |
|---|---|---|
| :link | 只有链接 | 未访问过的链接 |
| :visited | 只有链接 | 访问过的链接 |
| :hover | 所有元素 | 鼠标经过元素 |
| :active | 所有元素 | 鼠标点击元素 |
| :focus | 所有可被选中的元素 | 元素被选中 |
媒体查询
@media only screen and (max-width: 420px){
样式定义
}
四、设计帧动画
CSS3使用animation属性定义帧动画。
1、设置关键帧
@keyframes animationname {
keyframes-selector{
css-styles;
}
}
animationname：定义动画的名称
keyframes-selector：定义帧的时间，合法的值包括1~100%、from（等价于0%）、to（等价于100%）
css-styles：表示一个或多个合法的CSS样式属性
2、设置动画属性
animation-name、animation-duration、animation-time-function、animation-delay、animation-iteration-count、animation-direction、animation-play-state、animation-fill-mode