CSS3 2D变换、3D变换、过渡、动画

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：暂停