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教程之scale() [縮放]

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


        語法

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

        說明

        scale()函數能夠縮放元素。

        取值

        scale(<number>[, <number>]);表示使元素在X軸和Y軸同時縮放。<number>表示縮放倍數,可以是正數,負數和小數。負數是先翻轉元素然后再縮放。包含兩個參數,如果缺少第二個參數,那么第二個參數的值等于第一個參數。

        scaleX(<number>):表示只在X軸(水平方向)縮放元素。

        scaleY(<number>):表示只在Y軸(垂直方向)縮放元素。

        scaleZ(<number>):表示只在Z軸縮放元素。前提是元素本身或者元素的父元素設定了透視值

        實例代碼

        CSS
        
        				
        1. .scale_1{
        2.     -webkit-transform:scale(0.8,1.2);
        3.     -moz-transform:scale(0.8,1.2);
        4.     position:absolute;
        5.     left:0;
        6.     top:80px;
        7.     background:#4d6ea6;
        8. }
        9. .scale_2{
        10.     -webkit-transform:scale(0.5);
        11.     -moz-transform:scale(0.5);
        12.     position:absolute;
        13.     left:200px;
        14.     top:80px;
        15.     background:#b9f9cb;
        16. }
        17. .scale_3{
        18.     -webkit-transform:scale(-1.2,1.2);
        19.     -moz-transform:scale(-1.2,1.2);
        20.     position:absolute;
        21.     left:450px;
        22.     top:80px;
        23. }
        復制
        HTML
        
        				
        1. <div class="demo_box scale_1">寬度縮小80%,高度放大120%</div>
        2. <div class="demo_box scale_2">寬高同時縮小一半</div>
        3. <div class="demo_box scale_3">先翻轉再放大1.2倍</div>
        復制
        運行一下 »

        兼容性

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

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