CSS 缩放（scale）

CSS 缩放语法

在 CSS3 中，我们可以使用 transform 属性结合 scale() 函数来实现元素的缩放效果。缩放，包含 “缩小” 和 “放大” 两层意思。

语法：

transform: scaleX(x);         /* 沿 X 轴方向缩放 */
transform: scaleY(y);         /* 沿 Y 轴方向缩放 */
transform: scale(x, y);        /* 沿 X 轴和 Y 轴同时缩放 */

说明：

缩放函数也有 3 种：scale()、scaleX()、scaleY()。参数 x 表示元素沿 X 轴的缩放倍数，参数 y 表示元素沿 Y 轴的缩放倍数。

当 x 或 y 取值为 0~1 之间时，元素进行缩小；当 x 或 y 取值大于 1 时，元素进行放大。小伙伴们想一下 “倍数” 的概念，很快就懂了。

提示: 除了缩放之外，CSS 变形还有其他 3 种效果：平移、旋转、倾斜。

CSS 缩放示例

接下来，我们通过几个简单的例子来讲解 CSS 是如何实现缩放效果的。

示例 1：scaleX(x) 实现缩放

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        body { padding: 100px; }
        /* 设置原始元素样式 */
        #origin {
            width: 200px;
            height: 100px;
            border: 1px dashed black;
        }
        /* 设置当前元素样式 */
        #current {
            width: 200px;
            height: 100px;
            color: white;
            background-color: hotpink;
            opacity: 0.6;
            transform: scaleX(1.5);
        }
    </style>
</head>
<body>
    <div id="origin">
        <div id="current"></div>
    </div>
</body>
</html>

页面效果如下图所示。

CSS scaleX() 实现缩放 1

分析：

transform: scaleX(1.5); 表示元素沿着 X 轴方向放大为原来的 1.5 倍。如果把 1.5 改为 0.5，则元素会沿着 X 轴方向缩小为原来的 0.5 倍，此时页面效果如下图所示。

CSS scaleX() 实现缩放 2

实际上，transform: scaleX(1.5); 等价于 transform: scale(1.5, 1);，小伙伴们可以自行测试一下。

示例 2：scaleY(y) 实现缩放

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        body { padding: 100px; }
        /* 设置原始元素样式 */
        #origin {
            width: 200px;
            height: 100px;
            border: 1px dashed black;
        }
        /* 设置当前元素样式 */
        #current {
            width: 200px;
            height: 100px;
            color: white;
            background-color: hotpink;
            opacity: 0.6;
            transform: scaleY(1.5);
        }
    </style>
</head>
<body>
    <div id="origin">
        <div id="current"></div>
    </div>
</body>
</html>

页面效果如下图所示。

scaleY() 实现缩放 1

分析：

transform: scaleY(1.5); 表示元素沿着 Y 轴方向放大为原来的 1.5 倍。如果把 1.5 改为 0.5，则元素会沿着 Y 轴方向缩小为原来的 0.5 倍，此时页面效果如下图所示。

scaleY() 实现缩放 2

实际上，transform: scaleY(1.5); 等价于 transform: scale(1, 1.5);，小伙伴们可以自行测试一下。

示例 3：scale(x, y) 实现缩放

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        body { padding: 100px; }
        /* 设置原始元素样式 */
        #origin {
            width: 200px;
            height: 100px;
            border: 1px dashed black;
        }
        /* 设置当前元素样式 */
        #current {
            width: 200px;
            height: 100px;
            color: white;
            background-color: hotpink;
            opacity: 0.6;
            transform: scale(1.2, 1.5);
        }
    </style>
</head>
<body>
    <div id="origin">
        <div id="current"></div>
    </div>
</body>
</html>

页面效果如下图所示。

scale(x, y) 实现缩放

分析：

transform: scale(1.2, 1.5); 表示元素沿着 X 轴和 Y 轴两个方向上同时放大。其中，X 轴方向放大为原来的 1.2 倍，Y 轴方向放大为原来的 1.5 倍。

实际上，transform: scale(1.2, 1.5); 等价于以下代码：

transform: scaleX(1.2) scaleY(1.5);

注意，transform: scale(1.2, 1.5); 并不等价于下面代码：

transform:scaleX(1.2);
transform:scaleY(1.5);

这是因为，如果在同一个选择器中写两行 transform 属性，那么后面的一行会覆盖前面的一行。因此，上面的代码实际上只执行了 scaleY(1.5)。

在实际开发中，单纯对某个元素定义缩放是没有太多意义的。在实际开发中，CSS 缩放大多数情况下都是结合 CSS 过渡或 CSS 动画来一起使用。