过渡，变形，透视，动画（CSS 颠覆性特征）

一.过渡(CSS3)
过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
在CSS3里使用transition可以实现补间动画（过渡效果）
帧动画：通过一帧一帧的画面按照固定顺序和速度播放。
语法格式：
transition:  要过渡的属性      花费时间    运动曲线     何时开始;(如果有多组属性变化，用逗号隔开)

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。
transition-delay	规定过渡效果何时开始。默认是 0。

transition-timing-function是transition属性里最为复杂的一个，针对的是过渡效果的特效。
有基本五大特效

属性	描述
linear	线性过渡。等同于贝塞尔曲线(0,0,1.0,1.0)
ease	平滑过渡。等同于贝塞尔曲线(0.25,0.1,0.25,1.0)
ease-in	由慢到快。等同于贝塞尔曲线(0.42,0,1.0,1.0)
ease-out	由快到慢。等同于贝塞尔曲线(0,0,0.58,1.0)
ease-in-out	又慢到快再到慢。等同于贝塞尔曲线(0.42,0,0.58,1.0)

也可以自己制定过渡特效：cubic-bezier(number,number,number,number)。特定的贝塞尔曲线类型，4个数值需在[0,1]区间内（贝塞尔曲线，有人也翻译为贝兹曲线）（自己制定没学过，是百度上找的，但是表格中五大特效在一般情况下够用了）

二.2D变形(CSS3) transform
transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
1.移动translate(x, y) （translate 移动平移的意思）
语法格式：translate(50px,50px)
使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。
可以改变元素的位置，x、y可为负值；
translate(x,y)      水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)      仅水平方向移动（X轴移动）
translateY(Y)      仅垂直方向移动（Y轴移动）
2.缩放scale(x,y )
可以对元素进行旋转，正值为顺时针，负值为逆时针；
语法格式：transform:rotate(45deg);
3.transform-origin可以调整元素转换变形的原点
如果基点是四个角，用left top，如果想用精确，用像素值
语法格式： transform-origin（10px,10px）
4.倾斜skew(deg, deg)
对元素进行倾斜…
语法格式：transform:skew(30deg,0deg);
三.3D变形(CSS3) transform

属性	描述
rotateX()	就是沿着 x 立体旋转.
rotateY()	沿着y轴进行旋转
rotateZ()	沿着z轴进行旋转

1.透视(perspective)
电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
透视原理： 近大远小 。
浏览器透视：把近大远小的所有图像，透视在屏幕上。
perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置
注：并非任何情况下需要透视效果，根据开发需要进行设置。
perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素

属性	描述
translateX(x)	仅水平方向移动（X轴移动）
translateY(y)	仅垂直方向移动（Y轴移动）
translateZ(z)	直观表现就是大小变化
translate3d(x,y,z)	[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值
backface-visibility	backface-visibility 属性定义当元素不面向屏幕时是否可见。

四.动画(CSS3) animation
动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
语法格式：animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;