<address id="xpjh9"><listing id="xpjh9"><meter id="xpjh9"></meter></listing></address>

<address id="xpjh9"><address id="xpjh9"><listing id="xpjh9"></listing></address></address>
<noframes id="xpjh9">
<noframes id="xpjh9">

<address id="xpjh9"><address id="xpjh9"><listing id="xpjh9"></listing></address></address>
    <form id="xpjh9"></form><address id="xpjh9"><listing id="xpjh9"><menuitem id="xpjh9"></menuitem></listing></address>

      <noframes id="xpjh9">
      VB.net 2010 視頻教程 VB.net 2010 視頻教程 VB.net 2010 視頻教程
      SQL Server 2008 視頻教程 c#入門經典教程 Visual Basic從門到精通視頻教程
      當前位置:
      首頁 > 網站開發 > HTML >
      • css教程之transform-origin [變形原點]

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

      語法

      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+

      相關教程
      江苏快3 寿光 | 镇江 | 广汉 | 滁州 | 承德 | 诸城 | 甘南 | 邯郸 | 泰安 | 内蒙古呼和浩特 | 库尔勒 | 晋中 | 阜新 | 杞县 | 广安 | 临海 | 朝阳 | 西藏拉萨 | 洛阳 | 济南 | 果洛 | 伊犁 | 四川成都 | 海东 | 天水 | 衡阳 | 绥化 | 莆田 | 安顺 | 泗阳 | 阜阳 | 温岭 | 泰兴 | 玉环 | 九江 | 宁国 | 郴州 | 宜宾 | 营口 | 承德 | 锡林郭勒 | 凉山 | 赣州 | 宝应县 | 白银 | 安康 | 芜湖 | 果洛 | 黄冈 | 荆州 | 广饶 | 十堰 | 包头 | 固原 | 上饶 | 铜川 | 宜春 | 安岳 | 宝鸡 | 铜仁 | 慈溪 | 海宁 | 东海 | 德阳 | 防城港 | 黄山 | 攀枝花 | 昭通 | 沭阳 | 白沙 | 阿勒泰 | 蓬莱 | 舟山 | 贺州 | 随州 | 那曲 | 丹阳 | 永新 | 益阳 | 扬州 | 莒县 | 连云港 | 顺德 | 肇庆 | 三亚 | 天水 | 七台河 | 白城 | 济源 | 甘肃兰州 | 图木舒克 | 唐山 | 内江 | 澄迈 | 吴忠 | 庄河 | 沧州 | 厦门 | 怒江 | 青州 | 南京 | 衢州 | 莱州 | 毕节 | 阿克苏 | 铁岭 | 四平 | 南充 | 台中 | 崇左 | 唐山 | 云浮 | 朔州 |