CSS3 Transform详解

CSS3 Transform

简介：

Css3 transform 允许元素在2维以及3维空间进行变换。具体包括三大块，2D transform、3Dtransform、以及SVG transform。这种变化是基于像素操作的，操作包括移动，旋转，大小变换等。

Transform origin：

例如，如果bottom就是底边的中点，left就是左边的中点。Center就是图形的中心。当然也可以以length或者%来定位中心点。

 

这里要说一下，如果用的是谷歌浏览器的话，transform一定要用webkit前缀。

Perspective:视距的大小

使用方法如下：（看远近）

-webkit-transform: perspective(199px) rotateY(4500deg);

Perspective-origin:

transition:transform 5s linear;

-webkit-transform-origin: 50% 50% 100px;

-webkit-transform: perspective(1990px) rotateX(4500deg);

Transform-style:

这个值得具体使用方法，至今不清楚，只知道属性有flat和preserve-3d两个。

一般会选择后者preserve-3d；

Backface-visibility:

能不能看到背面。backface-visibility: hidden;

 

这个属性与我们设想的不同，因为背面如果设置成hidden的话，与事实不符合。

若想实现真实效果就需要两个div来弄。

Matrix这个东东也是有些些难。

像scale,translate或者rotate这种函数都相对而言比较简单

一些细节比如translate(30px);即向x正方向移动30px；

Skew表示倾斜   

一个参数的时候，表示水平方向的倾斜程度。

比如skew(30deg);

两个参数时

-webkit-transform: skew(0deg,30deg);

表示y方向倾斜程度