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教程之transform [變形基礎]

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


        語法

        transform: none | <transform-function>[<transform-function>]*
        語法項目 說明
        初始值 none
        適用于 塊元素和行內元素
        可否繼承
        媒介 視覺
        版本 CSS3.0

        說明

        transform屬性能對元素對象進行變形操作,主要包括以下幾種:旋轉rotate、縮放scale、移動translate、傾斜skew以及矩陣變形matrix。

        取值

        none:表示不進行變換;

        <transform-function>:表示一個或多個變換函數,以空格分開,因此可以同時對一個元素進行transform的多種屬性操作。

        • 1.rotate(<angle>):旋轉元素
        • 2.scale(<number>[, <number>]):縮放元素
        • 3.translate(<translation-value>[, <translation-value>]):移動元素
        • 4.skew(<angle> [,<angle>]):傾斜元素
        • 5.matrix(<number>,<number>,<number>,<number>,<number>,<number>):矩陣變形
        • 6.perspective(length):透視

        示例:transform:rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg);

        實例代碼

        CSS
        
        				
        1. .demo_rotate{
        2.     -webkit-transition:1s ease all;
        3.     -moz-transition:1s ease all;
        4.     padding:10px;
        5.     margin:90px auto;
        6. }
        7. .demo_rotate:hover{
        8.     -webkit-transform:rotate(360deg) scale(1.2,1.2);
        9.     -moz-transform:rotate(360deg) scale(1.2,1.2);
        10.     background:#ff9900;
        11. }
        復制
        HTML
        
        				
        1. <div class="demo_box demo_rotate">鼠標經過變大1.2倍、旋轉360度并改變背景色。</div>
        復制
        運行一下 »

        兼容性

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

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