CSS scale() 语法
在 CSS 中，scale() 函数一般作为 transform 属性的值，用于缩放元素的大小。 “缩放” 包含 2 部分的内容，也就是 “缩小” 和 “放大”。
语法：
transform: scale(x, y);说明：
scale() 函数接收 x 和 y 两个参数，说明如下：
- x 表示水平方向的缩放比例（X 轴），y 表示垂直方向的缩放比例（Y 轴），它们都是无单位数字。
- 如果只提供一个值（例如 scale(2)），则表示 x 和 y 使用相同的值，也就是实现的是等比缩放。
其中，缩放比例说明如下。
- 值大于 1 表示放大（例如，2 表示放大到 2 倍）。
- 值小于 1 表示缩小（例如，0.5 表示缩小到一半）。
- 值为 1 表示无缩放。
- 负值会翻转元素（例如，-1 沿相应轴翻转）。
对于 scale() 函数，小伙伴们需要清楚以下几点：
- 使用 scale() 缩放元素时，不会改变它在页面中的实际布局位置，也不会影响周围其他元素的排布。
- scale() 缩放中心默认为元素的中心，不过我们可以通过 transform-origin 属性来改变。
- scale() 可以与其他变换函数（如 rotate()、translate()、skew() 等）组合一起使用。
- scale() 经常与 transition 或 animation 配合使用，来实现按钮放大、图像缩放等效果。
CSS scale() 摘要
| 属于 | CSS 缩放 |
|---|---|
| 使用频率 | 高 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS scale() 示例
接下来，我们通过几个简单的例子来讲解一下 CSS scale() 函数是如何使用的。
示例 1：scale() 实现基本缩放
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
margin: 50px;
background-color: lightskyblue;
transition: transform 0.25s;
}
div:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<div></div>
</body>
</html>默认情况下，页面效果如下图 1 所示。当鼠标移到 div 元素上时，页面效果如下图 2 所示。
分析：
在这个例子中，我们设置 transform: scale(1.2);，此时当鼠标移到 div 元素上时，div 元素会在水平和垂直这 2 个方向同时放大 1.2 倍。下面 2 种写法是等价的。
/* 写法 1 */
transform: scale(1.2);
/* 写法 2 */
transform: scale(1.2, 1.2);提示: 实际上，绿叶网很多地方都使用了 scale() 结合 transition 来实现等比缩放的过渡效果。
示例 2：scale() 实现非等比缩放
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
margin: 50px;
background-color: hotpink;
transition: transform 0.5s;
}
div:hover {
transform: scale(2, 0.5);
}
</style>
</head>
<body>
<div></div>
</body>
</html>默认情况下，页面效果如下图 1 所示。当鼠标移到 div 元素上时，页面效果如下图 2 所示。
分析：
scale(2, 0.5) 表示 div 元素在水平方向放大为原来的 2 倍（改变宽度），并且垂直方向缩小为原来的 0.5 倍（改变高度）。
示例 3：transform-origin 改变 scale() 缩放中心
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: lightskyblue;
transform-origin: top left;
transition: transform 0.4s;
}
div:hover {
transform: scale(1.8);
}
</style>
</head>
<body>
<div></div>
</body>
</html>默认情况下，页面效果如下图 1 所示。当鼠标移到 div 元素上时，页面效果如下图 2 所示。
分析：
transform-origin: top left; 表示将缩放中心会从默认的 “元素中心” 变为 “元素左上角” 。其中，scale(1.8) 表示将元素放大 1.8 倍，然后缩放是从左上角开始的。
