scaleY()

基线 广泛可用

此功能非常成熟，可在许多设备和浏览器版本中使用。它自 2015 年 9 月.

报告反馈

试试看

scaleY() CSS 函数 定义了一种变换，它沿 y 轴（垂直方向）调整元素大小。其结果为 <transform-function> 数据类型。

它通过一个常数因子修改每个元素点的纵坐标（垂直方向，y 坐标），除非缩放因子为 1，在这种情况下，该函数是恒等变换。缩放不是各向同性的，元素的角度不保留。scaleY(-1) 定义了一个 轴对称，其水平轴穿过原点（如 transform-origin 属性指定）。

注意：scaleY(sy) 等效于 scale(1, sy) 或 scale3d(1, sy, 1)。

语法

transform: rotateX(180deg); === transform: scaleY(-1);
scaleY(s)

css

值

s

是 <number>，表示要应用于元素每个点的纵坐标（垂直方向，y 坐标）的缩放因子。 笛卡尔坐标 on ℝ^2 齐次坐标 on ℝℙ^2 笛卡尔坐标 on ℝ^3
( 1 0 0 值 ) 齐次坐标 on ℝℙ^3 ( 1 0 0 0 值 0 0 0 1 ) \left( \begin{array}{cc} 1 & 0 \\ 0 & s \end{array} \right) ( 1 0 0 0 值 0 0 0 1 ) \left( \begin{array}{cc} 1 & 0 \\ 0 & s \end{array} \right) ( 1 0 0 0 0 值 0 0 0 0 1 0 0 0 0 1 ) \left( \begin{array}{ccc} 1 & 0 & 0 \\ 0 & s & 0 \\ 0 & 0 & 1 \end{array} \right)
\left( \begin{array}{cccc} 1 & 0 & 0 & 0 \\ 0 & s & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)

示例

HTML

[1 0 0 s 0 0]
<div>Normal</div>
<div class="scaled">Scaled</div>

CSS

transform: rotateX(180deg); === transform: scaleY(-1);
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scaleY(0.6);
  background-color: pink;
}

html

规范

结果
规范
# CSS 变换模块级别 1

浏览器兼容性

funcdef-transform-scaley

另请参见