40. CSS3变形之矩阵 matrix()

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

示例演示：

通过matrix()函数来模拟 transform 中translate()位移的效果。

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);
}

效果如下：

以上关于40. CSS3变形之矩阵 matrix()的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。