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

      • 2017-05-25 22:50 來源:未知

      語法

      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+

      相關教程
      江苏快3 甘南 | 惠州 | 厦门 | 临沂 | 肇庆 | 三门峡 | 青州 | 三明 | 红河 | 洛阳 | 郴州 | 陕西西安 | 抚顺 | 雅安 | 盘锦 | 醴陵 | 沭阳 | 滕州 | 仙桃 | 沭阳 | 黑河 | 河池 | 莒县 | 乐平 | 昌都 | 海北 | 驻马店 | 安顺 | 鞍山 | 武威 | 泉州 | 燕郊 | 寿光 | 常德 | 沧州 | 七台河 | 河池 | 禹州 | 简阳 | 沧州 | 景德镇 | 顺德 | 丹东 | 宿州 | 博罗 | 乐山 | 荆门 | 贵州贵阳 | 海南海口 | 黄南 | 巴彦淖尔市 | 浙江杭州 | 陕西西安 | 金华 | 日喀则 | 阿坝 | 湖州 | 汉中 | 昭通 | 锡林郭勒 | 滕州 | 潮州 | 莒县 | 商洛 | 惠州 | 咸阳 | 长兴 | 大理 | 温州 | 临沧 | 蚌埠 | 吴忠 | 怒江 | 嘉峪关 | 蚌埠 | 垦利 | 泰安 | 张家口 | 绍兴 | 呼伦贝尔 | 庆阳 | 黄南 | 清徐 | 亳州 | 濮阳 | 东台 | 滁州 | 宜都 | 邳州 | 汉川 | 信阳 | 庆阳 | 恩施 | 宣城 | 商洛 | 昭通 | 渭南 | 葫芦岛 | 仁怀 | 白沙 | 辽阳 | 广元 | 香港香港 | 广安 | 来宾 | 朝阳 | 长兴 | 河池 | 哈密 | 鞍山 | 郴州 | 威海 | 柳州 |