tranform全点解析

tranform全点解析
CSS3动画的属性主要分为三类：transform、transition以及animation。

Transform:(css3 2D 转换)
注意：这些效果叠加时，中间⽤空格隔开
作⽤：能够对元素进⾏移动、缩放、转动、拉长、拉伸
转换：使元素改变形状、尺⼨、位置的⼀种效果
Transform：2D的转换⽅法：
2D的转换
rotate
设置元素顺时针旋转的⾓度，⽤法是：transform: rotate(x);
参数x必须是以deg结尾的⾓度数或0，可为负数表⽰反向。

scale
设置元素放⼤或缩⼩的倍数，⽤法包括：
transform: scale(a); 元素x和y⽅向均缩放a倍
transform: scale(a, b); 元素x⽅向缩放a倍，y⽅向缩放b倍
transform: scaleX(a); 元素x⽅向缩放a倍，y⽅向不变
transform: scaleY(b); 元素y⽅向缩放b倍，x⽅向不变
Transform:2D详细转换⽅法：
2D详细转换
translate()⽅法：
通过translate()⽅法，元素从其当前位置移动，根据给定的left(x坐标)和top(y坐标)位置.(参数为负数时，反⽅向移动物体，其基点默认为元素中⼼点，也可以根据transform-origin进⾏改变基点)
translate 设置元素的位移，⽤法为：
transform: translate(a, b); 元素x⽅向位移a，y⽅向位移b
transform: translateX(a); 元素x⽅向位移a，y⽅向不变
transform: translateY(b); 元素y⽅向位移b，x⽅向不变
skew
设置元素倾斜的⾓度，⽤法包括：
transform: skew(a, b); 元素x⽅向逆时针倾斜⾓度a，y⽅向顺时针倾斜⾓度b
transform: skewX(a); 元素x⽅向逆时针倾斜⾓度a，y⽅向不变
transform: skewY(b); 元素y⽅向顺时针倾斜⾓度b，想⽅向不变
以上的参数均必须是以deg结尾的⾓度数或0，可为负数表⽰反向。

matrix
设置元素的变形矩阵，因为矩阵变形过于复杂，暂略。

(1)translateX(n):transform:translateX(100px);
(2)translateY(n):transform:translateY(20px);
(3)translate(x,y):transform:translate(100px,20px);
注意：translate(100px);认为和translateX(100px)等价。

Rotate(angle)⽅法：
通过rotate(),元素顺时针旋转给定的⾓度。

允许负值，元素将逆时针旋转
Transform:rotate(30deg);
Transform:rotate(120deg);
Transform:rotate(-30deg);
Scale()⽅法：
通过scale()⽅法，元素的尺⼨会增加或减少，根据给定的宽度(X轴)和⾼度(Y轴)参数。

（中⼼点：元素的中⼼位置，缩放基数为1，⼤于1就放⼤，⼩于1就缩⼩）
（1）scaleX()⽅法：transform:scaleX(2);
值scaleX（2)把宽度转换为原始尺⼨的2倍
（2）scaleY()⽅法：transform:scaleY(2);
ScaleY(2)把⾼度度转换为原始尺⼨的2倍
（3）scale()⽅法：transform:scale(2,1.5);
值scale（2,2)把宽度转换为原始尺⼨的2倍，⾼度度转换为原始尺⼨的2倍
注意：scale（2）与scale(2,2)等价
Skew(angle)⽅法：
通过skew()⽅法，元素翻转给定的⾓度，根据给定的⽔平线（X轴）和垂直线(Y轴)参数（中⼼点：元素中⼼）
（1）skewX(angle):transform:skewX(30deg);
值skewX(30deg)围绕X轴把元素翻转30度。

（2）skewY(angle):transform:skewY（30deg）
值skewY(30deg)围绕Y轴把元素翻转30度。

(3)skew(x-angle,y-angle):transform:skew(30deg,10deg);
值skew(30deg,20deg)围绕X轴把元素翻转30度，围绕Y轴翻转20度。

注意：skew(30deg)等价于skewX(30deg）
Matrix()⽅法:
Matrix()⽅法把所有2D转换⽅法组合在⼀起。

Matrix()⽅法需要六个参数，包含数学函数，允许您：旋转，缩放，移动，倾斜元素。

Transform-origin(x,y)⽅法：
改变元素的基点位置。

X和y的值：百分值，em，px，关键字。

Left,center,right是⽔平⽅向取值：
Left=0%;center=50%;right:100%;
Top,center,bottom是垂直⽅向的取值：
Top=0%;center=50%;bottom=100%;
如果只取⼀个值，表⽰垂直⽅向值不变（center）
1、top left | left top等价于0 0 | 0% 0%
2、top | top center | center top等价于50% 0
3、right top | top right等价于100% 0
4、left | left center | center left等价于0 50% | 0% 50%
5、center | center center等价于50% 50%（默认值）
6、right | right center | center right等价于100% 50%
7、bottom left | left bottom等价于0 100% | 0% 100%
8、bottom | bottom center | center bottom等价于50% 100%
9、bottom right | right bottom等价于100% 100%
Css3 3D转换
Css3 transform⽅法：
Transform-style:
规定如何在3D空间中呈现被嵌套的元素，该属性必须与transform属性⼀同使⽤。

该属性设置在⽗元素中
Transform-style:flat|preserve-3d
Perspective:
Perspective:number|none;
perspective属性定义3D元素距视图的距离，以像素计。

该属性允许您改变3D元素,查看3D元素的视图。

注意：
（1）当为元素定义perspective属性时，其⼦元素会获得透视效果，⽽不是元素本⾝。

（2）与perspective-origin属性⼀同使⽤该属性，这样就能改变3D元素的底部位置
（3）我们可以简单的理解为视距，⽤来设置⽤户和元素3D空间Z平⾯之间的距离。

⽽其效应由他的值来决定，值越⼩，⽤户与3D空间Z平⾯距离越近，视觉效果更令⼈印象深刻；反之，值越⼤，⽤户与3D空间Z平⾯距离越远，视觉效果就很⼩。

（perspective取值越⼩，3D效果就越明显，也就是你的眼睛越靠近真3D。

）
Perspective-origin:
Perspective-origin:x-axisy-axis;
定义3D元素所基于的X轴和Y轴。

该属性允许您改变3D元素的底部位置。

当为元素定义perspective-origin属性时，其⼦元素会获得透视效果，⽽不是元素本⾝。

(该属性必须与perspective属性⼀同使⽤，⽽且只影响3D转换元素)
注意：为了指转换⼦元素变形的深度，perspective-origin属性必须定义⽗元素上。

通常perspective-origin属性本⾝不做任何事情，它必须被定义在设置了perspective属性的元素上。

换句话说，perspective-origin属性需要与perspective-origin属性结合起来使⽤，以便将视点移⾄元素的中⼼以外位置
Backface-visibility:隐藏被旋转元素的背⾯
Backgace-visibility:visible|hidden;
Translate3d()
transform:translate(30px,30px,200px);
Transform:translate3d(30px,30px,-200px);
当z轴值越⼤时，元素也离观看者更近，从视觉上元素就变得更⼤；反之其值越⼩时，元素也离观看者更远，从视觉上元素就变得更⼩。

TranslateZ():
Transform:translateZ(200px);
Transform:translateZ(-200px);
使⽤translateZ()函数可以让元素在Z轴进⾏位移，当其值为负值时，元素在Z轴越移越远，导致元素变得较⼩。

反之，当其值为正值时，元素在Z轴越移越近，导致元素变得较⼤。

ScaleZ():
默认值为1，当值⼤于1时，元素放⼤，反之⼩于1⼤于0.01时，元素缩⼩。

ScaleZ(-1)定义了⼀个原点在z轴的对称点
单独使⽤没有效果，需配合其他变形函数⼀起使⽤才会有效果
Transform:scale(5) rotateX(45deg);
Transform:scale(.25) rotateX(45deg);
RotateX(angle),rotateY(angle),rotateZ(angle):
围绕X/Y/Z轴旋转，angle为旋转的⾓度，可以是正值，顺时针旋转，可以是负值，逆时针旋转
Rotate3d(x,y,z,angle):
·x：是⼀个0到１之间的数值，主要⽤来描述元素围绕X轴旋转的⽮量值；
·y：是⼀个０到１之间的数值，主要⽤来描述元素围绕Y轴旋转的⽮量值；
·z：是⼀个０到１之间的数值，主要⽤来描述元素围绕Z轴旋转的⽮量值；
·a：是⼀个⾓度值，主要⽤来指定元素在3D空间旋转的⾓度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

Transform:rotateX(45deg);
Transform:rotateY(45deg);
Transform:rotateZ(45deg);
Transform:rotate3d(.6,1,.6,45deg);
dd
origin
设置元素的悬挂点，⽤法包括：
transform-origin: a b; 元素的悬挂点为(a, b)
元素的悬挂点即为它旋转和倾斜时的中⼼点。

取值中的a、b可以是长度值、以%结尾的百分⽐或者left、top、right、bottom四个值。

transition-property
指定transition效果作⽤的CSS属性，其值是CSS属性名。

transition-duration
动画效果持续的时间，其值为以s结尾的秒数。

transition-timing-function
transition-delay
动画效果推迟开始执⾏的时间，其值为以s结尾的秒数。

CSS3动画的⽣命周期如下图所⽰，从中可以清楚的看出duration和delay之间的关系：
CSS3中真正的动画属性是animation，⽽前⾯的transform和transition都只是对DOM元素的变形或者是状态的过渡。

实际上，CSS3所⽀持的动画效果只是填充动画，也就是说先设定整个动画⽣命周期中的⼏个关键状态（key frame，关键帧），然后动画将⾃⾏计算并模拟关键帧之间的过渡。

那么在设置animation的属性之前就必须先设定好关键帧了。

关键帧@keyframes的语法结构如下：
@keyframesNAME {
a% {
/*CSS属性*/
}
b% {
/*CSS属性*/
}
...
}
NAME表⽰动画的名字；a%、b%表⽰以百分号结尾的百分数，⽤于设定该关键帧在动画⽣命周期中的位置；百分数后⾯的{ } 中则需要写成该关键帧状态下CSS属性的值。

另外，如果同⼀个百分数值在@keyframes中出现多次，那么后出现的将覆盖先出现的；并且关键帧在@keyframes中时⽆序的。

设置完关键帧后就可以继续设定animation了。

animation-name
指定选⽤的动画的名字，即keyframes中的NAME。

animation-duration
同transition-duration。

animation-timing-function
同transition-timing-function。

animation-delay
同transition-delay。

animation-iteration-count
设定动画执⾏的次数，其值可以是数字也可以是infinite（循环执⾏）。

animation-direction
设定动画执⾏的⽅向，其值可以是normal（正常顺序播放）或alternate（反向播放）。

因为CSS3还没有正式发布，所以各种浏览器对它的⽀持也不尽相同。

所以在设置CSS3属性（包括@开头的新属性）的时候通常需要对其添加浏览器标识的前缀，如-webkit- 表⽰Webkit内核的浏览器Chrome和Safari，-moz- 表⽰Fire Fox，-o- 表⽰Opera。

⽆视IE吧，在IE上的实现通常还是要⽤到滤镜，⽽不是CSS3。

下⾯的代码模拟了上述⼤部分的CSS3动画属性，由于只使⽤了–webkit- 前缀，所以只能在Chrome或Safari下正常运⾏。

HTML代码：
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>CSS3动画</title>
<link type="text/css"rel="stylesheet"href="animation.css"/>
</head>
<body>
<div class="rotate">rotate</div>
<div class="scale">scale</div>
<div class="translate">translate</div>
<div class="skew">skew</div>
<div class="origin">origin</div>
<div class="single">single property</div>
<div class="whole">whole property</div>
<div class="resume">change & resume</div>
<div class="animation">animation</div>
</body>
</html>
CSS3动画
CSS代码：
animation.css
div {width:80px;height:30px;line-height:30px;text-align:center;background:#06f;color:#fff;font-family:Arial,Helvetica,sans-serif;-webkit-border-radius:10px;margin:5px;}
.rotate {-webkit-transform: rotate(0deg);}
.rotate:hover {-webkit-transform: rotate(90deg);}
.scale {-webkit-transform: scale(1);}
.scale:hover {-webkit-transform: scale(1.5);}
.translate {-webkit-transform: translate(0px,0px);}
.translate:hover {-webkit-transform: translate(50px,50px);}
.skew {-webkit-transform: skew(0);}
.skew:hover {-webkit-transform: skewY(20deg);}
.origin {-webkit-transform-origin:topleft;-webkit-transform: rotate(0);}
.origin:hover {-webkit-transform: rotate(45deg);}
.single {width:150px;}
.single:hover {background:#f00;width:200px;height:100px;line-height:100px;-webkit-transition-property: background;-webkit-transition-duration:2s;}
.whole {width:150px;}
.whole:hover {width:200px;height:100px;line-height:100px;background:#f00;-webkit-transition-duration:2s;}
.resume {width:150px;-webkit-transition-duration:2s;}
.resume:hover {width:200px;height:100px;line-height:100px;background:#f00;-webkit-transition-duration:2s;}
.animation:hover {-webkit-animation-name: anim;-webkit-animation-duration:2s;-webkit-animation-timing-function: linear;-webkit-animation-direction: alternate;-webkit-animation-iteration-count: infinite;} @-webkit-keyframes anim {
0%{width:80px;height:30px;line-height:30px;background:#06F;}
50%{width:140px;height:65px;line-height:65px;background:#360;}
100%{width:200px;height:100px;line-height:100px;background:#f00;}
}。