CSS scaleY() 函数

CSS scaleY() 语法

在 CSS 中，scaleY() 函数一般作为 transform 属性的值，用于沿 Y 轴（垂直方向）缩放元素。

语法：

transform: scaleY(number);

说明：

number 是一个无单位的数字，表示缩放倍数：

1：表示原始大小（无缩放）。
大于 1：表示放大。比如 2 表示高度放大 2 倍。
小于 1 但大于 0：表示缩小。比如 0.5 表示高度缩小到 50%。
负值：会沿 Y 轴翻转元素。比如 -1 表示上下翻转且保持原始大小。

对于 scaleY() 函数，小伙伴们需要清楚以下几点：

scaleY() 只会影响元素在 Y 轴上的缩放，而不影响 X 轴的缩放。
scaleY() 可以搭配其他变换函数（如 translate()、rotate()、skew()）一起使用。
scaleY() 支持 CSS 动画和 CSS 过渡，常用于实现动态效果。

提示: 与缩放相关的 CSS 函数有 3 个：scale()、scaleX()、scaleY()。

CSS scaleY() 摘要

属于	CSS 缩放
使用频率	中
兼容性	查看
官方文档	查看
MDN	查看

CSS scaleY() 示例

接下来，我们通过几个简单的例子来讲解一下 CSS scaleY() 函数是如何使用的。

示例 1：scaleY() 实现 Y 轴缩放

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            margin: 50px;
            background-color: lightskyblue;
            transform: scaleY(1.5);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

scaleY() 实现 Y 轴缩放

分析：

在这个例子中，transform: scaleY(1.5) 表示将 div 元素的高度放大到原始高度的 1.5 倍，而宽度保持不变。其中，scaleY() 只会影响 Y 轴方向的缩放。

示例 2：scaleY() 结合过渡动画

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            margin: 50px;
            background-color: hotpink;
            transition: transform 0.3s ease;
        }
        div:hover {
            transform: scaleY(1.5);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

默认情况下，页面效果如下图 1 所示。当鼠标移到 div 元素上时，页面效果如下图 2 所示。

scaleY() 结合过渡动画（1）

scaleY() 结合过渡动画（2）

分析：

在这个例子中，我们使用了 transition 属性来实现过渡效果。当鼠标移到 div 元素上时，它会平滑地沿 Y 轴放大到原来的 1.5 倍。

示例 3：scaleY() 实现翻转效果

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: hotpink;
            transform: scaleY(-1);
            text-align: center;
            line-height: 100px;
            color: white;
        }
    </style>
</head>
<body>
    <div> 绿叶网 </div>
</body>
</html>

页面效果如下图所示。

scaleY() 负值翻转效果

分析：

transform: scaleY(-1) 表示将 div 元素沿 Y 轴翻转，此时内容会上下倒置。