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);
}
演示結果:
在CSS編輯器第12-13行輸入正確代碼,通過matrix()函數實現translate(100px,100px)的效果
思考一下,我們剛講過的矩陣屬性
請驗證,完成請求
由于請求次數過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報