2D位移
2D位移可以改变元素位置，
给元素添加transform转换属性
transform的具体值如下：translateX设置水平方向位移，若指定的是百分比，则参考自身宽度
translateY设置垂直方向位移，若指定的是百分比，则参考自身高度
translate一个值代表水平，一个垂直
注意：
位移对行内元素无效
位移配合定位，可实现元素水平垂直居中
.box{
position：absolute；
left：50%；
right：50%；
transform:translate(-50%,-50%);
}2D缩放，让元素放大或者缩小
给元素添加transform转换属性
transform的具体值如下：
scaleX 设置水平方向的缩放比例，值为一个数字，1表示不缩放，大于1表示放大，小于1表示缩小
scaleY 设置垂直方向的缩放比例，值为一个数字，1表示不缩放，大于1表示放大，小于1表示缩小
scale 同时设置水平，垂直方向，一个值代表水平和垂直方向，两个值一个代表水平，一个代表垂直
2D旋转
transform转换属性
rotate 设置旋转角度，指定一个（deg），正值顺时针，负值逆时针
2D扭曲 元素在二维平面内被拉扯，产生变形
给元素添加transform属性
skewX 设置水平方向上扭曲，值为角度值，将元素的左上角和右下角拉扯
skewY 设置垂直方向上扭曲，值为角度值，将元素的左上角和右下角拉扯
skew 一个值时代表skewX，两个值代表skewX，skewY
多重变换
transform：translate（-50%，-50%） rotate（45deg）
多重变换时建议后旋转
2D变换-变换原点
元素变换时默认原点是元素的中心，使用transform-origin可以设置变换的原点
修改变换原点对位移没有影响，对旋转和缩放会产生影响
如果提供两个值，第一个是横坐标，第二个是纵坐标
如果只提供一个值，若是像素值，表示横坐标，纵坐标取50%；若是关键词，另一个取50%
transform-origin：50% 50%， 变换原点在元素的中心位置，百分比相对于自身----默认值
transform-origin：left top，原点在左上角
transform-origin：50px 50px，变换原点在左上角50px 50px像素位置
transform-origin：0，只写一个值时，第二个值默认为50%
3D变换
给子元素设置transform属性
重要原则：元素进行3D变换的首要操作，父元素必须开启3D空间
使用transform-style开启3D空间，可选值如下：
flat：让子元素位于此元素的二维平面内（2D空间）---默认值
preserve-3d：让子元素位于此三维空间内（3D空间）
设置景深
产生透视效果，看起来更加立体
使用perspective设置景深，可选这如下
none：不指定透视
长度值：指定观察者z=平面的距离，不允许负值
perspective设置发生3D变换元素的父元素
透视点设置
所谓透视点位置，就是观察者位置；默认透视点在元素的中心
使用perspective-origin设置观察者位置
例子
perspective-origin：400px 300px
相对坐标轴向右偏移400px，向下偏移300px
通常情况下不调整透视点位置
3D位移
就是在2D位移的基础上，可以让元素沿z轴位移，具体使用方式如下：
先给元素添加转换属性transform
编写transform的具体值，3D相关可选值如下：
translateZ 设置z轴位移，需要指定长度值，正值向屏幕外，负值向屏幕里，且不能写百分比
translate3d 第1个参数是对应x轴，第2个参数是对应y轴，第3个参数是对应z轴，且均不能省略
3D旋转
就是在2D旋转的基础上，可以让元素沿x轴和y轴旋转，具体使用如下
先给元素添加转换属性transform
编写transform的具体值，3D相关可选值如下
rotateX 设置x轴旋转角度，需指定一个角度值（deg）面对x轴正方向：正值顺时针，负值逆时针
rotateY 设置Y轴旋转角度，需指定一个角度值（deg）面对y轴正方向：正值顺时针，负值逆时针
rotate3d 前三个参数分别表示坐标轴x，y，z，第四个值表示旋转角度，参数不允许省略。
例如：transform：rotate3d（1，1，1，30deg），意思是xyz分别旋转30度
过渡
过渡可以在不适用flash动画，不使用JavaScript的情况下，让元素从一种样式，平滑过渡到另一种样式
1、transition-property
作用：定义哪个属性需要过渡，只有在该属性中定义的属性（比如宽、高、颜色等）才会有过渡效果
常用值：
none：不过渡任何属性
all：过渡所有能过渡的属性
2、transition-duration
作用：设置过渡的持续时间，即：一个状态过渡到另一个状态耗时多久
常用值：
0：没有任何过渡时间-----默认值
s或ms：秒或毫秒
3、transition-delay
作用：指定开始过渡的延迟时间，单位s或ms
4、transition-timing-function
作用：设置过渡类型
常用值：
ease：平滑过渡----默认值
linear：线性过渡
ease-in;慢->快
ease-out：快->慢
ease-in-out：慢->快->慢
step-start：等同于steps（1，start）无视延迟时间，直接过渡
step-end：等同于steps（1，end）最后直接过渡
steps（integer，？）接受两个参数的步进函数，分步过渡，第二个值可以取start或end
cubic-bezie（num,num,num,num）特定的贝塞尔曲线类型
5、transition复合属性
如果设置了一个时间，表示duration；如果设置了两个时间，第一个是duration，第二个是delay；其他值没有顺序
transition：1s 1s linear all；
动画的基本使用
第一步定义关键帧
1、简单方式定义：
写法一：
@keyframs 动画名{
from{
/*property1:value1*/
/*property2:value2*/
}
to{
/*property1:value1*/
}
}
2、完整方式定义：
@keyframs 动画名{
0%{
/*property1:value1*/
}
60%{
/*property1:value1*/
}
100%{
/*property1:value1*/
}
}第二步：给元素应用动画，用到的属性如下：
1、animation-name：给元素具体的动画名
2、animation-duration：设置动画所需时间
3、animation-delay：设置动画延迟时间
animation-timing-function，设置动画类型，常用值如下：
ease：平滑动画---默认值
linear：线性过渡
ease-in：慢->快
ease-out:快->慢
ease-in-out：慢->快->慢
step-start: 等同于steps（1，start）
step-end:等同于steps（1，end）
steps（integer，？）接受两个参数的步进函数，分步过渡，第二个值可以取start或end
cubic-bezie（num,num,num,num）特定的贝塞尔曲线类型
animation-iteration-count，指定动画的播放次数，常用值如下：
number：动画循环次数
infinite：无限循环
animation-direction，指定动画方向，常用值如下：
normal：正常方向（默认）
reverse：反方向运行
alternate：动画正常运行再反方向运行，并持续交替运行
alternate-reverse：动画反运行再正方向运行，并持续交替运行
animation-fill-mode，设置动画之外的状态
forwards：设置对象状态为动画结束时的状态
backwards：设置对象状态为动画开始时的状态
animation-play-state，设置动画的播放状态，常用值如下：
running：运动（默认）
paused：暂停
