css translate 坐标,#CSS3转换（3）：CSS3 Transform与坐标系统

四、CSS3 Transform与坐标系统

transform-origin属性

transform-origin属性允许您更改转换元素的位置。

【语法】

transform-origin:x-axis y-axis z-axis;

五、CSS3 矩阵

矩阵的概念

矩阵可以理解为方阵，只不过，平时方阵里面站的是人，矩阵中是数值。而所谓矩阵的计算，就是两个方阵的人(可以想象成古代的方阵士兵)互相冲杀。

CSS3中的矩阵

CSS3中的矩阵指的是一个方法，书写为matrix()和matrix3d();

matrix是元素2D平面的移动变换(transform)，2D变换矩阵为3*3；

matrix3d是元素3D的移动变换(transform)，3D变换则是4*4的矩阵。

矩阵matrix

transform:matrix(a,c,b,d,tx,ty);

注意书写方向是竖直方向。

转换公式

x,y表示转换元素的所有坐标

此处,x,y即tranform-origin的值；如果没写，默认是0，0。即0,0,1

【备注】

单位矩阵是对角线为0,0,0

即：

1 0 0

0 1 0

0 0 1

目标矩阵说明

经计算得到的即目标矩阵，

其中ax+cy+e为变换后的水平坐标，bx+dy+f表示变换后的垂直位置。

案例：

计算经过：

【说明】

transform: matrix(1, 0, 0, 1, x, y)等同于transform: translate(x, y)

【注意】

matrix在FF浏览器下需要添加单位，webkit内核默认px，translate等方法需要加单位。

1).矩阵matrix缩放(scale)

matrix(sx, 0, 0, sy, 0, 0) ——scale(sx, sy)

【备注】

sx,sy分别代表：

2).矩阵matrix旋转(rotate)

matrix(cosθ,sinθ,-sinθ,cosθ,0,0)——rotate(θdeg)。

3).矩阵matrix拉伸(skew)

matrix(1, tanθy, tanθx, 1, 0, 0) ——skew(θxdeg, θydeg)。

【备注】

矩阵很麻烦，但是有些效果只能用矩阵实现，比如下面这个例子

矩阵matrix镜像对称效果

【备注】

计算所需公式：

k'=(y'-y)/(x'-x)

k'*k=-1

【说明】

对称轴一定通过元素变换的中心点，k 是对称轴的斜率

3D变换中的矩阵

从二维到三维，是从4到9；而在矩阵里头是从3 * 3变成4 * 4 ,9到16了。

【例子】

transform:matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1);

案例，transform:matrix3d(.5,0,0,0,0,.5,0,0,0,0,.5,0,0,0,0,1);等同于transform:scale3d(.5,.5,.5);

六、CSS3扩展属性

transform-style属性

该属性是指定嵌套元素是怎样在三维空间中呈现。

【语法】

transform-style:flat|preserve-3d;

【默认值】

transform-style:flat;

perspective属性

指定观察者与[z=0]平面的距离，使具有三维位置变换的元素产生透视效果。

【语法】

perspective:number|none

【默认值】

perspective:none;

perspective-origin属性

指定透视点的位置

【语法】

perspective-origin:x-axis y-axis;

【默认值】

perspective-origin:50% 50%;

backface-visibility属性

指定元素背面面向用户时是否可见。

【语法】

backface-visibility:visible|hidden;

【默认值】

backface-visibility:visible;

案例

backface-visibility

body {

-webkit-perspective: 800px;

perspective: 800px;

-webkit-perspective-origin: 50%;

perspective-origin: 50%;

}

.cube { display: inline-block; width: 100px; height: 100px; margin: 50px;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

}

.cube > div { position: absolute; width: 100%; height: 100%; box-shadow: inset 0 0 15px rgba(0, 0, 0, .2); background-color: rgba(255, 255, 255, .1); color: gray; font-size: 20px; line-height: 100px; text-align: center; }

.front {

-webkit-transform: translatez(50px);

transform: translatez(50px);

}

.back {

-webkit-transform: rotatey(180deg) translatez(50px);

transform: rotatey(180deg) translatez(50px);

}

.right {

-webkit-transform: rotatey(90deg) translatez(50px);

transform: rotatey(90deg) translatez(50px);

}

.left {

-webkit-transform: rotatey(-90deg) translatez(50px);

transform: rotatey(-90deg) translatez(50px);

}

.top {

-webkit-transform: rotatex(90deg) translatez(50px);

transform: rotatex(90deg) translatez(50px);

}

.bottom {

-webkit-transform: rotatex(-90deg) translatez(50px);

transform: rotatex(-90deg) translatez(50px);

}

.c1 > div {

-webkit-backface-visibility: visible;

backface-visibility: visible;

}

.c2 > div {

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

}

1

2

3

4

5

6

1

2

3

4

5

6