CSS | scaleY()函数

在CSS中，scaleY()函数用于沿Y轴缩放元素。它可以设置元素在Y轴方向上的缩放大小，从而改变元素的高度。

语法

transform: scaleY(scaleY-value);

• scaleY-value: 设置元素在Y轴方向上的缩放比例。取值范围为0~n，其中1为实际大小，0为不可见。

示例

将元素在Y轴方向上缩小一半：

.example {
  transform: scaleY(0.5);
}

将元素在Y轴方向上放大两倍：

.example {
  transform: scaleY(2);
}

支持度

scaleY()函数的支持度如下：

• Chrome：1
• Firefox：3.5
• Safari：3.2
• Opera：10.5
• IE：9
• Edge：12

注意事项

• scaleY()函数只能用于具有定位属性（如position: absolute）的元素或者设置了display: inline-block属性的元素。
• scaleY()函数也可以与其他transform函数（如scaleX()、scale()、rotate()等）联合使用，以实现更加复杂的变换效果。
• 在使用scaleY()函数时，需注意元素内部的文本或者其他元素也会随之缩放，从而可能影响整个布局。可以通过设置子元素的transform属性来避免这种情况。

参考文献

• MDN web docs | scaleY()