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-origin [變形原點]

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


        語法

        transform-origin: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ]
        語法項目 說明
        初始值 center center,效果等同于 50% 50%
        適用于 塊元素和行內元素
        可否繼承
        媒介 視覺
        版本 CSS3.0

        說明

        transform的參照點默認為元素的中心點,如果要改變這個參照點,可以是用transform-origin屬性進行自定義。

        受影響變形函數:rotate()。

        取值

        該屬性提供2個參數值,第一個用于橫坐標,第二個用于縱坐標;如果只提供一個,該值將用于橫坐標,縱坐標將默認為50%。

        percentage:用百分比指定坐標值。可以為負值。

        length:用長度值指定坐標值。可以為負值。

        left center right是水平方向取值,而top center bottom是垂直方向的取值。

        實例代碼

        CSS
        
        				
        1. .origin_1{
        2.     -webkit-transform-origin:center center;
        3.     -moz-transform-origin:center center;
        4.     -webkit-transition:0.5s ease all;
        5.     -moz-transition:0.5s ease all;
        6.     position:absolute;
        7.     left:10px;
        8.     top:50px;
        9. }
        10. .origin_2{
        11.     -webkit-transform-origin:left top;
        12.     -moz-transform-origin:left top;
        13.     -webkit-transition:0.5s ease all;
        14.     -moz-transition:0.5s ease all;
        15.     position:absolute;
        16.     left:250px;
        17.     top:50px;
        18. }
        19. .origin_3{
        20.     -webkit-transform-origin:100% 100%;
        21.     -moz-transform-origin:100% 100%;
        22.     -webkit-transition:0.5s ease all;
        23.     -moz-transition:0.5s ease all;
        24.     position:absolute;
        25.     left:480px;
        26.     top:50px;
        27. }
        28. .origin_4{
        29.     -webkit-transform-origin:20px 60px;
        30.     -moz-transform-origin:20px 60px;
        31.     -webkit-transition:0.5s ease all;
        32.     -moz-transition:0.5s ease all;
        33.     position:absolute;
        34.     left:250px;
        35.     top:160px;
        36. }
        37. .origin_1:hover,
        38. .origin_2:hover,
        39. .origin_3:hover,
        40. .origin_4:hover{
        41.     -webkit-transform:rotate(45deg);
        42.     -moz-transform:rotate(45deg);
        43. }
        復制
        HTML
        
        				
        1. <div class="demo_box origin_1">在中心點旋轉45度</div>
        2. <div class="demo_box origin_2">在左上角旋轉45度</div>
        3. <div class="demo_box origin_3">用百分百值來來設置旋轉點旋轉45度</div>
        4. <div class="demo_box origin_4">用長度值來設置旋轉點旋轉45度</div>
        復制
        運行一下 »

        兼容性

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

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