首页 > 其他 > 详细

变形--矩阵 matrix()

时间:2016-08-29 19:11:29      阅读:180      评论:0      收藏:0      [点我收藏+]

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()

原文:http://www.cnblogs.com/gulan/p/5819040.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!