首页 > 代码库 > 变形--矩阵 matrix()

变形--矩阵 matrix()

matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵,用来指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵,我在这里只是简单的说一下CSS3中的transform有这么一个属性值,如果需要深入了解,需要对数学矩阵有一定的知识。

示例演示:通过matrix()函数来模拟transformtranslate()位移的效果。
HTML代码:

<div class="wrapper">

  <div></div>

</div>

CSS代码:

.wrapper {

  width: 300px;

  height: 200px;

  border: 2px dotted red;

  margin: 40px auto;

}

.wrapper div {

  width:300px;

  height: 200px;

  background: orange;

  -webkit-transform: matrix(1,0,0,1,50,50);

  -moz-transform:matrix(1,0,0,1,50,50);

  transform: matrix(1,0,0,1,50,50);

}

演示结果:技术分享

 

变形--矩阵 matrix()