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>