CSS 属性

CSS scale 属性在指定元素的缩放变换时非常有用,独立于transform 属性。

此属性方便界面使用,因为您不需要记住属性 transform 中具体的顺序转换函数。

可能value

CSS 属性比例可以具有以下值之一:

  • 单个值:指定 <number><percentage> 值可沿 X 和 Y 轴将元素缩放相同的值。相当于scale() 2D函数,具有单个值。

  • 两个值:指定两个<number><percentage> 值沿 X 和 Y 轴按给定值缩放元素。相当于scale() 2D函数,有两个值。

  • 三个值:指定三个<number><percentage> 值,分别以 3D 比例沿 X、Y 和 Z 轴按给定值缩放元素。相当于 scale3d() 函数。

  • none:指定不应用缩放.

适用范围

所有可变形元素。

语法

scale = none | <number> | <percentage> ] {1,3} 

    CSS 比例: 元素缩放

    以下示例演示了 CSS 缩放属性的使用以及各种传递值的方式。元素在悬停时缩放:

    <html>
    <head>
    <style>
       .box {
          display: inline-block;
          margin: 0.7em;
          min-width: 5.5em;
          line-height: 6.5em;
          text-align: center;
          transition: 2s ease-in-out;
          border: 2px solid black;
          background-color: lightgreen;
       }
    
       #scale-one-box:hover {
          scale: 2;
       }
    
       #scale-two-box:hover {
          scale: 1.5 65%;
       }
    
       #scale-three-box:hover {
          scale: 20% 40% 60%;
       }
    </style>
    </head>
    <body>
       <h1>CSS Scale 属性 鼠标放上去看效果</h1>
       <div class="box" id="scale-one-box">scale (x)</div>
       <div class="box" id="scale-two-box">scale (x,y)</div>
       <div class="box" id="scale-three-box">scale (x,y,z)</div>
    </body>
    </html> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33