VB.net 2010 視頻教程 VB.net 2010 視頻教程 VB.net 2010 視頻教程
SQL Server 2008 視頻教程 c#入門經典教程 Visual Basic從門到精通視頻教程
當前位置:
魔兽世界wow > 網站開發 > HTML >
  • css教程之matrix() [矩陣變形]

  • 2017-05-25 23:19 來源:未知

語法

transform:matrix(<number>,<number>,<number>,<number>,<number>,<number>);
語法項目 說明
初始值 none
適用于 塊元素和行內元素
可否繼承
媒介 視覺
版本 CSS3.0

說明

魔兽世界wow www.geyjm.icu matrix()是矩陣函數,以一個含六值的(a,c,e,b,d,f)變換矩陣的形式指定一個2D變換,相當于直接應用一個[a c e b d f]變換矩陣。

注意:c,e的值用正弦或余弦值表示

IE雖然不支持大部分的CSS3變形,但是支持matrix濾鏡。

取值

matrix(<number>,<number>,<number>,<number>,<number>,<number>);

該函數包括6個參數(a,c,e,b,d,f),實際上它是一個3*3的矩陣:

2016-03-27_190000.jpg

  • 參數詳解:
  • a表示scaleX();
  • c表示skewY();
  • e表示skewX();
  • b表示scaleY();
  • d表示translateX();
  • f表示translateY();

實例代碼

CSS

				
  1. .matrix{
  2.     -webkit-transform:matrix(1,0.4,0,1,0,0);
  3.     -moz-transform:matrix(1,0.4,0,1,0,0);
  4.     position:absolute;
  5.     left:200px;
  6.     top:50px;
  7. }
復制
HTML

				
  1. <div class="demo_box matrix">復雜的矩陣變形</div>
復制
運行一下 »

兼容性

IE Firefox Opera Safari Chrome
IE 10+ Firefox 3.5+ Opera 11.50+ Safari 10+ Chrome 2.0+

相關教程