CSS scaleX() 函数

CSS scaleX() 语法

在 CSS 中，scaleX() 函数一般作为 transform 属性的值，用于沿水平方向（X 轴）来缩放元素。

语法：

transform: scaleX(number);

说明：

number 是一个无单位的数值，表示水平缩放比例。

number = 1：保持原始尺寸（无缩放）。
number > 1：放大元素。比如 2 表示宽度放大到 2 倍。
0 < number < 1：缩小元素。比如 0.5 表示宽度缩小到一半。
number < 0：反向缩放（镜像效果，同时缩放）。

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

使用 scaleX() 只会改变元素在屏幕上的显示大小，而不会影响周围其他元素的位置。
scaleX() 只会拉伸或压缩元素的水平宽度，不会影响其垂直高度。
scaleX() 可以与 rotate()、translate()、skew() 等函数一起使用，来实现更复杂的效果。
当 scaleX() 为负数（如 -1）时，元素会左右翻转。这种方式适合用于创建镜像效果、或对称效果。

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

CSS scaleX() 摘要

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

CSS scaleX() 示例

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

示例 1：scaleX() 实现水平缩放

运行代码

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

页面效果如下图所示。

scaleX() 实现水平缩放

分析：

在这个例子中，transform: scaleX(1.5) 表示将元素的宽度放大到原始宽度的 1.5 倍（150px），而高度保持不变（100px）。scaleX() 只会影响水平方向，而不会影响垂直方向。

示例 2：scaleX() 结合 CSS 过渡

运行代码

<!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;
        }
        div:hover {
            transform: scaleX(1.5);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

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

scaleX() 结合 CSS 过渡（1）

scaleX() 结合 CSS 过渡（2）

分析：

这里通过 transition: transform 0.3s 添加平滑过渡效果。当鼠标悬停时，transform: scaleX(2) 将 div 宽度放大到 2 倍（200px）。

提示: 绿叶网就用到了非常多的缩放动画，小伙伴们思考一下是如何实现的。

示例 3：scaleX() 负值实现镜像效果

运行代码

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

页面效果如下图所示。

scaleX() 负值实现镜像效果

分析：

在这个例子中，transform: scaleX(-1) 表示将 div 元素水平翻转，从而产生镜像效果。