Skip to main content

缩放函数 scale

Docs

transform-function - CSS：层叠样式表 | MDN (mozilla.org)

scale() - CSS：层叠样式表 | MDN (mozilla.org)

  • 缩放：scale(x, y): scale() 函数可改变元素的大小。
  • 值个数
    • 一个值时，设置 x 轴上的缩放
    • 二个值时，设置 x 轴和 y 轴上的缩放
  • 值类型：
    • 数字：
      • 1：保持不变
      • 2：放大一倍
      • 0.5：缩小一半
    • 百分比：百分比不常用
  • scale 函数时 scaleX 和 scaleY 的缩写：

CSS 函数 scale() 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素，同时可以在不同的方向设置不同的缩放值。

该变换通过一个二维向量确定在一个方向缩放的多少。如果缩放向量的两个坐标是相等的，那么所讲是均等的，或者说是各向同的，同时元素的形状是被保持的。这种情况下进行的是位似变换。

当坐标值处于区间 [-1, 1] 之外时，该变换将在相应的坐标方向上放大该元素，当处在区间之中时，该变换将在相应的坐标方向上缩小该元素。当值为 1 时将不进行任何处理，当为负数时，将进行像素点反射之后再进行大小的修改。

备注

scale() 仅适用于在欧几里德平面（二维平面）上的变换。如果需要进行空间中的缩放，必须使用 scale3D() 。

语法​

scale() = scale( <number> , <number>? )
scaleX() = scaleX( <number> )
scaleY() = scaleY( <number> )
Details
Details