CSS 数据类型

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 设置为右

<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>