2D transform方法 3D转换 css3动画

2D Transform 方法
函数 描述
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

①移动
translate(x，y) 方法：元素从其当前位置，根据给定的left(x 坐标) 和 top(y 坐标)位置参数进行移动;
translateX(n)：定义 2D 转换，沿着 X 轴移动元素。
translateY(n)：定义 2D 转换，沿着 Y 轴移动元素。
②旋转
rotate(deg)：定义2D旋转，在参数中规定角度;正值是顺时针旋转，负值为逆时针旋转；
rotate和translate同时使用，当书写顺序不同时，会影响显示效果

③缩放
scale(number,number)：指定对象的2D缩放,第一个参数对应X轴，第二个参数对应Y轴，如果第二个参数未提供，则默认取第一个参数的值
scaleX(number)：指定对象X轴的（水平方向）缩放
scaleY(number)：指定对象Y轴的（垂直方向）缩放
④拉伸
skew(angle ,angle)：指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
skewX(angle)：指定对象X轴的（水平方向）扭曲
skewY(angle)：指定对象Y轴的（垂直方向）扭曲
rotate和skew同时使用，当书写顺序不同时，会影响显示效果

⑤矩阵（不常用）
css3 2D转换-扩展
matrix() 方法 矩阵
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许：旋转、缩放、移动以及倾斜元素。
div#div2{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 /
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); / Firefox /
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); / Safari and Chrome /
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); / Opera */
}

⑥设置中心原点
transform-origin:设置或检索对象以某个原点进行转换。 2D转换可以改变元素的X和Y轴，默认值为：50% 50%，等同于center center （3D转换元素，可以更改元素的Z轴）。
属性值：
X轴：
percentage：用百分比指定坐标值。
length：用长度值指定坐标值。
left：指定原点的横坐标为left
center：指定原点的横坐标为center
right：指定原点的横坐标为right
Y轴：
percentage：用百分比指定坐标值。
length：用长度值指定坐标值。
top：指定原点的纵坐标为top
center：指定原点的纵坐标为center
bottom：指定原点的纵坐标为bottom
5. CSS过渡
CSS3 过渡
通过CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下，使元素从一种样式变换为另一种样式时为元素添加效果。
兼容：
Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
Internet Explorer 9 以及更早的版本，不支持 transition 属性。
Chrome 25 以及更早的版本，需要前缀 -webkit-。

transition-property:none | all | indent
属性值：
none：没有属性改变,transition马上停止执行；
all：所有属性改变,这个也是其默认值；当为all 时，则元素产生任何属性值变化时都将执行transition效果；
indent:元素属性名,指定元素的某一个属性值；
transition-duration:规定完成过渡效果需要花费的时间（以秒或毫秒计）；其默认值是0，也就是变换时是即时的；

transition-timing-function:规定过渡效果的时间曲线

transition-timing-function:cubic-bezier(['kjuːbɪk])贝塞尔曲线
cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。(x1, y1, x2, y2)四个值特定于曲线上点P1和点P2，所有值需在[0, 1]区域内，否则无效。

transition-delay
是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，属性值为数字单位为s（秒），它的使用和transition-duration极其相似，也可以作用于所有元素，包括:before和:after伪元素。
默认大小是”0″，也就是变换立即执行，没有延迟。

缩写：
transition:后面有多个属性值时,用逗号隔开;
transition:property duration timing-function delay ,
property duration timing-function delay;

需要值得注意的一点：transition-delay与 transition-duration的值都是时间，所以要区分它们在连写中的位置，一般浏览器会根据先后顺序决定，第一个时间为 transition-duration第二个为transition-delay。
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
（1）指定要添加效果的CSS属性 ；
（2）指定效果的持续时间；
注意：如果时长未规定，则不会有过渡效果，因为默认值是 0。CSS 属性改变的典型时间是鼠标指针位于元素上时.
在转换概念当中：是没有display这么一说的，通过改变元素的透明度去实现从无到有；

一.3D转换
转换属性
transform 向元素应用2D或3D转换
transform-origin 指定元素的中心点位置
transform-style 规定如何在 3D 空间中呈现被嵌套的元素（3D视角）
perspective 景深;定义3D元素距视图的距离
backface-visibility 定义元素在不面对屏幕时是否可见

2.景深–视距
perspective:景深;定义3D元素距视图的距离，以像素计;
属性值：
none : 默认值，与0效果相同，没有透视效果；
number:元素距离视图的距离，以像素计;
(1) 离屏幕多远去观察元素
(2) perspective取值为none或不设置，就没有真3D空间。
(3) perspective取值越小，3D效果就越明显，也就是你的眼睛越靠近真3D；perspective的值无穷大，或值为0时与取值为none效果一样
perspective():在3D变形中，除了perspective属性可以激活一个3D空间之外，在3D变形的函数中的perspective()也可以激活3D空间。
区别是:(1) perspective用在舞台元素上（变形元素们的共同父元素）；
perspective()就是用在当前变形元素上，并且可以与其他的transform函数一起使用。
(2) perspective属性可以取值为none或长度值；而perspective()函数取值只能大于0，如果取值为0或比0小的值，将无法激活3D空间；
例如：
.stage { perspective: 600px }
.stage .box { transform: perspective(600px); }

3.transform-style
transform-style: 规定如何在 3D 空间中呈现被嵌套的元素,该属性必须与transform属性一同使用;
此属性有以下两个属性值：
flat:为默认值，表示所有子元素在2D平面呈现;
preserve-3d: 表示所有子元素在3D空间中呈现;
transform-style属性需要设置在父元素上面，并且高于任何嵌套的变形元素。

4.transform-origin
transform-origin:center center -50px(第三个参数不接受center的写法)属性指定元素的中心点在哪，后面增加了第三个数transform-origin-z，控制元素三维空间中心点

5.位移
位移效果：
translateX (); 默认是以X(水平方向)移动
translateY (); 默认是以Y(垂直方向)移动
translateZ (); 设置元素以Z(前后)轴移动，正值向前使元素视觉上变大，负值向
后，使元素视觉上变小
translate3d(x,y,z): 设置x，y，z轴的移动；
3种写法等价
transform:translateZ(800px) translateX(30px) translateY(30px);
transform:translateZ(800px) translate(30px,30px);
transform:translate3d(30px,30px,800px)

6.旋转
rotateX()：定义沿着 X 轴的 3D 旋转。
rotateY(deg)：定义沿着 Y 轴的 3D 旋转。
rotateZ(deg)：设置元素围绕Z轴旋转；
如果仅从视觉角度上看，rotateZ()函数让元素顺时针或逆时针旋转，并且效果和rotate()效果等同，但它不是在2D平面的旋转;
transform:rotate3d(0,1,0,50deg)
x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转效果：
当值为1时，表示旋转，当值为0是表示不旋转；

7.缩放
scaleX (number)：默认是X轴(长度)缩放；
scaleY (number)：默认是Y轴(高度)缩放；
scaleZ (number): 默认是Z(宽度)缩放；
scale3d(num1,num2,num3):设置x,y,z轴的缩放；
scaleZ()和scale3d()函数单独使用时没有任何效果，需要配合其它的变形函数一起使用才会有效果，书写时在其他变形函数的后边书写；
3种写法等价
transform:scaleZ(1.2) scaleY(.3) scaleX(1);
transform:scaleZ(1.2) scale(1,.3);
transform:scale3d(1,.3,1.2)

8.backface-visibility
backface-visibility:定义元素在不面对屏幕时是否可见。(它用于决定当一个元素的背面面向用户的时候是否可见)
属性值：
hidden：不可见
visible：可见（默认值）

二.CSS3动画
通过 @keyframes 规则，能够创建动画。
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中，能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%，0% 是动画的开始时间，100% 动画的结束时间。

1.名称
animation-name：规定 @keyframes 动画的名称。
属性值：
none：不引用任何动画名称；
identifier：定义一个或多个动画名称(identifier标识)；

2.animation-duration 花费的时间
animation-duration ：规定动画完成一个周期所花费的秒或毫秒,默认是0意味着没有动画效果;

3.animation-timing-function过渡类型
animation-timing-function：检索或设置对象动画的过渡类型；
属性值：
linear：线性过渡。等同于贝塞尔曲线(0.0, 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]区间内

4.animation-delay延时
animation-delay：检索或设置对象动画的延迟时间；允许给负值，表示提前几秒进入动画；

5.animation-iteration-count循环次数
animation-iteration-count :检索或设置对象动画的循环次数
属性值：
infinite：无限循环
number：指定对象动画的具体循环次数

6.animation-direction循环方向
animation-direction:检索或设置对象动画在循环中是否反向运动，默认是normal ;

7.animation-fill-mode动画时间之外的状态
animation-fill-mode：规定对象动画时间之外的状态;

8.animation-play-state设置状态
animation-play-state:检索或设置对象动画的状态，默认是 running；
属性值：
running：运行
paused：暂停

9.缩写animation
(1) 此属性是所有动画属性的简写属性，除了animation-play-state属性 ;
(2) 想要设置多个动画时，动画之间用逗号分隔；
(3) 必须定义动画的名称和时长,如果忽略时长,则动画不会执行，因为默认值是 0;