scale()函数

CSS中的scale()函数用来改变元素的大小。

可以通过向量形式定义的缩放值来放大或缩小元素，也可以在不同的方向设置不同的缩放值。

 

该变换通过一个二维向量确定在一个方向缩放的多少。

如果缩放向量的两个坐标是相等的，那么缩放是均等的，或者说是各向同的，同时元素的形状是被保持的。这种情况下进行的是位似变换。

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

 

语法：

scale(sx, sy)

sx：表示缩放向量的横坐标

sy：表示缩放向量的纵坐标。如果未设置，则默认与sx值相同，进行位似变换

 

 

举例说明：

HTML

<p>foo</p>
<p class="transformed">bar</p>

CSS

p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  /* 等同于 scaleX(2) scaleY(0.5) */
  transform: scale(2, 0.5);
  transform-origin: left;
  background-color: blue;
}

效果如下：

点击链接查看