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()
码云笔记 » 40. CSS3变形之矩阵 matrix()