四、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;
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>backface-visibility</title>
<style type="text/css">
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;
}
</style>
</head>
<body>
<div class="cube c1">
<div class="front">1</div>
<div class="back">2</div>
<div class="right">3</div>
<div class="left">4</div>
<div class="top">5</div>
<div class="bottom">6</div>
</div>
<div class="cube c2">
<div class="front">1</div>
<div class="back">2</div>
<div class="right">3</div>
<div class="left">4</div>
<div class="top">5</div>
<div class="bottom">6</div>
</div>
</body>
</html>
网友评论