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