CSS - scale()

CSS 中的 scale() 函数用于在二维平面上对元素应用缩放变换（调整大小）。该函数可以以不同的比例水平和垂直调整元素的大小，因为缩放量由向量 [sx, sy] 定义。结果是 <transform-function> 数据类型。

缩放变换由一个二维向量确定，其坐标指定每个方向上的缩放或调整大小的程度。
当两个坐标相等时，缩放将是均匀的（各向同性的），并且元素的纵横比将保持不变。这种形式的缩放变换称为相似变换。
如果坐标值超出 [-1, 1] 范围，则元素将在指定的维度上增长。
如果坐标值在 [-1, 1] 范围内，则元素将在指定的维度上缩小。
如果坐标值为负，则会导致在指定维度上发生点反射。
当值为 1 时，它对元素的大小没有影响。

使用 scale() 函数只能在二维平面上进行缩放。为了在三维平面上实现缩放，需要使用 scale3d() 函数。

可能的值

scale() 函数可以接受一个或两个值作为参数，表示每个方向上要应用的缩放量。

sx：这是一个 <number> 或 <percentage> 值，表示缩放向量的横坐标（水平，x 坐标）。
sy：这是一个 <number> 或 <percentage> 值，表示缩放向量的纵坐标（垂直，y 坐标）。当未为 sy 指定值时，它默认为 sx 的值，这会导致均匀缩放，从而保持元素的纵横比。

语法

transform: scale(sx) | scale(sx, sy);

无障碍性问题：网站上动画的调整大小或缩放对于用户界面来说是一个棘手的问题。因此，如果您想在网页上包含动画缩放，则应为用户提供一个控件，以便他们可以关闭动画。

CSS scale() - 同时缩放 X 和 Y 维度

以下是一个同时在 scale() 函数中传递 X 和 Y 维度的示例，其中 scale(0.6) 等效于 scaleX(0.6) scaleY(0.6)

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      background-color: cyan;
      border: 2px solid black;
   }

   .scale-single-value {
      background-color: pink;
   }

   #xy:hover {
      transform: scale(0.6);
   }
   </style>
   </head>
   <body>
      <section>
         <p>No function</p>
         <div></div>
      </section>

   <section>
      <p>scale(0.6)</p>
      <div id="xy" class="scale-single-value"></div>
   </section>
   </body>
   </html>

CSS scale() - 分别缩放 X 和 Y 维度

在下面的示例中，X 和 Y 维度分别传递，其中 scale(0.5, 0.8) 等效于 scaleX(0.5) scaleY(0.8)，并且 transform-origin 设置为 right

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      background-color: cyan;
      border: 2px solid black;
   }

   .scale-double-value {
      background-color: lightgreen;
   }

   #x-y:hover {
      transform: scale(0.5, 0.8);
      transform-origin: right;
   }
   </style>
   </head>
   <body>
      <section>
         <p>No function</p>
         <div></div>
      </section>

   <section>
      <p>scale(0.5, 0.8)</p>
      <div id="x-y" class="scale-double-value"></div>
   </section>
   </body>
   </html>

打印页面