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

效果如下：

點擊鏈接查看