1. <wbr id="m8vu6"></wbr>

      <del id="m8vu6"><center id="m8vu6"><source id="m8vu6"></source></center></del>
        <p id="m8vu6"><sub id="m8vu6"></sub></p>

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

        本站最新發布   Python從入門到精通|Python基礎教程
        試聽地址  
        http://www.squ68.com/eschool/python.html


        語法

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

        說明

        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+

        相關教程
                
        免费看成年人视频大全_免费看成年人视频在线观看