課程
/前端開發
/HTML/CSS
/十天精通CSS3
translate（）和transform: matrix（）效果有區別嗎？
2015-07-22
源自：十天精通CSS3 8-5
正在回答
這篇blog可以看下：理解CSS3 transform中的Matrix(矩陣)--這玩意確實有點復雜。 然而，這卻是屌絲逆襲的一個好機會。
冷月詩魂
區別大了，在CSS3中的變形，如rotate(),skew(),scale(),translate()，都可以使用矩陣matrix()函數來代替。
Matrix()與translate()關系：translate(x,y)對應Matrix(1,0,0,1,x,y);
Matrix()與scale()關系：scale(x,y)對應Matrix(x,0,0,y,0,0);
Matrix()與rotate()關系：rotate(x)對應Matrix(cos(x),sin(x),-sin(x),cos(x),0,0)
Matrix()與skew()關系：skew(x,y)對應Matrix(1,tan(x),tan(y),1,0,0)
舉報
本課程為CSS3入門教程，深刻詳解CSS3知識讓網頁穿上絢麗裝備
4 回答translate 和 position的區別
2 回答這個和div>div的效果有什么區別?
4 回答read-only和disabled有什么區別嗎？
3 回答both and forwards在效果上沒有什么區別呀！
1 回答matrix
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2015-12-30
這篇blog可以看下：理解CSS3 transform中的Matrix(矩陣)--這玩意確實有點復雜。 然而，這卻是屌絲逆襲的一個好機會。
2015-11-21
區別大了，在CSS3中的變形，如rotate(),skew(),scale(),translate()，都可以使用矩陣matrix()函數來代替。
Matrix()與translate()關系：translate(x,y)對應Matrix(1,0,0,1,x,y);
Matrix()與scale()關系：scale(x,y)對應Matrix(x,0,0,y,0,0);
Matrix()與rotate()關系：rotate(x)對應Matrix(cos(x),sin(x),-sin(x),cos(x),0,0)
Matrix()與skew()關系：skew(x,y)對應Matrix(1,tan(x),tan(y),1,0,0)