css scale

/* 使用 CSS 的 scale 函数来缩放元素 */

/* 基本用法：将元素的宽度和高度同时缩放为原来的 1.5 倍 */
.transformed-element {
    transform: scale(1.5);
}

/* 分别设置宽度和高度的缩放比例：宽度缩放为原来的 2 倍，高度缩放为原来的 0.5 倍 */
.transformed-element-different-ratios {
    transform: scale(2, 0.5);
}

/* 缩放并保持元素的中心点不变 */
.transformed-element-center-origin {
    transform: scale(1.5);
    transform-origin: center;
}

/* 注意：scale 函数的值可以是小数或负数。例如，scale(-1, 1) 将元素水平翻转 */
.transformed-element-flip-horizontal {
    transform: scale(-1, 1);
}

解释说明：

• transform: scale(x)：x 是缩放的比例因子。如果只有一个参数，则表示宽度和高度都按此比例缩放。
• transform: scale(x, y)：分别指定宽度 (x) 和高度 (y) 的缩放比例。
• transform-origin：指定缩放时的参考点，默认是元素的中心点 (center)。可以通过设置不同的值（如 top left、bottom right 等）来改变缩放的基点。
• 缩放比例可以是任意数值，包括小数和负数。负数会触发元素的翻转效果。