CSS3D效果和CSS3动画

3D位移

在css3中3D位移主要包括两种函数translateZ（）和translate3d（）
translate3d（）函数使一个元素在三维空间移动。这种变形的特点是
使用三维向量的坐标定义元素在每个方向移动多少

随着px的增加，直观效果上：
x：从左向右移动
Y：从上向下移动
Z：以方框中心为原点，变大

3D旋转

在三维变形中，我们可以让元素在任何轴旋转。为此，CSS3新增
三个旋转函数：rotateX（）、rotateY（）和rotateZ（）

随着度数的增加，直观效果上；
X:以方框X轴，从下向上旋转
Y:以方框Y轴，从左向右旋转
Z:以方框中心为原点，顺时针旋转

3D缩放

通过使用3D缩放函数，可以让元素在Z轴上按比例缩放。默认值为
1，当值大于1时，元素放大，反之小于1大于0.001时，元素缩放。
当scale3d（）中X轴和Y轴同时为1，即scale3d（1,1，sz）其效果
等同于scaleZ（sz）

随着放大倍数的增加，直观效果上
X：以方框Y轴，左右变宽
Y：以方框X轴，上下变高
Z：看不出变换。scaleZ（）和scale3d（）函数单独使用时没有任何效果

3D Transform转换属性

属性 描述
transform 向元素应用2D或3D转换
transform-origin 允许你改变被转换元素的位置
transform-style 规定被嵌套元素如何在3D空间中显示
perspective 规定3D元素的透视效果
perspective-origin 规定3D元素的底部位置
backface-visibility 定义元素在不面对屏幕时是否可见。

语法：transform-style：flat | preserve-3d
说明：规定如何在3D空间中呈现被嵌套的元素
flat：子元素将不保留其3D位置
preserve-3d：子元素将保留其3D位置

prespective属性：透视，视角
perspective取值为none或不设置，就没有真3D空间
perspective取值越小，3D效果就越明显，也就是你的眼睛越靠近真3D
perspective的值无穷大，或值为0时与取值为none效果一样

perspective可以写在画布上（父元素）上，也可以直接写在元素本身上，
对于一张画布只有一个变形体的时候，几乎没有差别。但是当一个画布上
有多个变形体的时候，两种写法的差别立即就变现出来了

语法：perspective-origin：x-axis y-axis

说明：定义3D元素所基于的X轴和Y轴。该属性允许您改变3D元素的
底部位置。该属性的默认值为"50%，50%"（也就是center）它可以
是长度值（以受支持的长度单位表示）、百分比或以下三个关键词
之一：left（表示在包含框的X轴方向长度的0%），center（表示中间点）
，或right（表示长度的100%）

第一个长度值指定相对于元素的包含框的X轴上的位置
第一个长度值指定相对于元素的包含框的Y轴上的位置

语法：backface-visibility：visible | hidden；
说明：定义当元素不面向屏幕时是否可见。如果在旋转元素不希望看到其背面
该属性很有用。

visible：为backface-visibility的默认值，表示反面可见
hidden：表示反面不可见。

CSS3动画

通过css3，我们能够创建动画，这可以在许多网页中取代动画图片、
Flash动画以及javaScript。

第一种叫过渡（transition）动画，就是从初始状态过渡到结束状态
这个过程中所产生的动画。所谓的状态就是指大小、位置、颜色、
变形（transform）等等这些属性。css过渡只能定义首和尾两个
状态，所以是最简单的一种动画。

第二种叫做关键帧（keyframes）动画。不同于第一种的过渡动画
只能定义首位两个状态，关键帧动画可以定义多个状态，或者用
关键帧来说的话，过渡动画只能定义第一帧和最后一帧这两个关键
帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂
的动画效果。

通过@keyframes规则，您能够创建动画。
创建动画的原理是，将一套css样式逐渐变化为另一套样式。
在动画过程中，您能够多次改变这套CSS样式。
以百分比来规定改变发生的时间，或者通过关键词“from”
和“to”等价于0%和100%。0%是动画的开始时间，
100%动画的结束时间。为了获得最佳的浏览器支持，您应该
始终定义0%和100%选择器

当在@keyframes中创建动画时，请把它捆绑到某个选择器
，否则不会产生动画效果。
通过规定至少以下两项css3动画属性，即可将动画绑定到
选择器；规定动画的名称；规定动画的时长

语法：@keyframes animationname{ keyframes-selector{css-styles；}}
说明：
animationname：声明动画的名称。
keyframes-selector：用来划分动画的时长，可以选择百分比形式，
也可以使用“from”和“to”的形式
“from”和“to”的形式等价于0%和100%
建议始终使用百分比形式

@keyframes规则和所有动画属性
属性 描述
animation --------- 所有动画属性的简写属性，除了
animation-paly-state属性
animation-name --------- 规定@keyframes动画的名称
animation-duration -------- 规定动画完成一个周期所花费的秒或
毫秒。默认是0

animation-timing-function— 规定动画的速度曲线
animation-delay ----- 规定动画何时开始。默认是0
animation-iteration-count---- 规定动画被播放的次数。默认是1

语法：aniation-name：keyframename | none；
说明：
animation-name 属性为@keyframes动画规定名称

keyframename：规定需要绑定到选择器的keyframe的名称
none：规定无动画效果

语法：animation-duration：time；
说明：
animation-duration属性定义动画完成一个周期所需要的时间，以秒或毫秒计

time：规定完成动画所花费的时间。默认值是0，意味着没有动画效果。

语法：animation-timing-function：value；
说明：
animation-timing-function规定动画的速度曲线

linear：动画从头到尾的速度是相同的
ease：默认。动画以低速开始，然后加快，在结束前变慢
ease-in：动画以低速开始
ease-out：动画以低速结束
ease-in-out：动画以低速开始和结束
cubic-bezier（n，n，n，n）：在cubic-bezier函数中自己的值。可能
的值是从0~1的数值。

语法：animation-delay：time
说明：
animation-delay属性定义动画何时开始
animation-delay值以秒或毫秒计

time：可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是0.

语法：animation-iteration-count：n | infinite
说明：
animation-iteration-count属性定义动画的播放次数

n：定义动画播放次数的数值
infinite：规定动画应该无限次播放

语法：animation-direction：normal | alternate
说明：
animation-direction属性定义是否应该轮流反向播放动画
如果animation-direction值是“alternate”，则动画会在
奇数次数（1、3、5等等）正常播放，而在偶数次数（2、4、6等等）向后播放

normal：默认值。动画应该正常播放
alternate：动画应该轮流反向播放。

语法：animation-play-state：paused | running（ 结合javaScript使用）
说明：
animation-play-state属性规定动画正在运行还是停止
注释：可以在javaScript中使用该属性，这样就能在播放过程中暂停动画

paused：规定动画已暂停
running：规定动画正在播放

这些属性可以连接起来 缩写使用
animation：（名字） （播放时长）（播放速度）
（延迟时间）（重复不断的播放）（倒过来放）