2D轉換方法分為以下5種： 1.位移 translate() 2.旋轉 rotate() 3.縮放 rotate() 4.傾斜 skew() 5.矩陣 matrix()
1.translate(50px, 100px)，根據給定的引數，從當前位置進行移動（x軸移動距離，y軸移動距離）
div{ transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ }
2.rorate(30deg); 順時針旋轉指定的度數，如果引數為負，代表逆時針旋轉
div{ transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ }
3.scale(2,3); 寬(x軸)和高(y軸)變為指定倍數
div{ -ms-transform:scale(2,3); /* IE 9 */ -webkit-transform: scale(2,3); /* Safari */ transform: scale(2,3); /* 標準語法 */ }
4.skew(); 在x軸和y軸上傾斜的角度
div{ transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ }
5.matrix(); 矩陣有6個引數，分別代表（寬度的縮放倍數，Y軸的傾斜幅度， X軸的傾斜幅度，高度的縮放倍數，x軸的位移， y軸的位移）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/95287.html
標籤：Html/Css
上一篇：CSS3 影片
下一篇：rem布局