使用CSS的transform: scale()可实现元素缩放，如scale(1.5)放大1.5倍，scale(0.5)缩小一半，并支持transform-origin设置缩放中心点，常用于悬停效果、动画和响应式设计。

在HTML和CSS中，想要实现元素的缩放效果，最常用的方法是使用CSS的transform属性中的scale()函数。它可以在不改变布局的情况下，对元素进行放大或缩小。

scale() 基本语法

transform: scale(s); —— s 是一个数值，表示缩放比例。

例如：

• scale(1)：元素保持原大小
• scale(1.5)：放大为原来的1.5倍
• scale(0.5)：缩小为原来的一半
• scale(-1)：反向缩放（镜像翻转）

也可以分别控制X轴和Y轴的缩放：

立即学习“前端免费学习笔记（深入）”；

• scale(2, 0.5)：水平方向放大2倍，垂直方向缩小一半

如何在HTML中使用

直接在CSS中设置transform: scale()即可。比如：

Smart Picture

Smart Picture 智能高效的图片处理工具

42

查看详情

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: transform 0.3s ease;
}

<div class=”box”></div>

当鼠标悬停在方块上时，它会放大到原来的1.2倍，transition让缩放更平滑。

缩放的中心点控制

默认情况下，缩放是以元素的中心点（50% 50%）为基准的。你可以用transform-origin修改这个基点：

• transform-origin: top left; —— 从左上角开始缩放
• transform-origin: center bottom; —— 从底部中心缩放

示例：

.box {
  transform: scale(1.3);
  transform-origin: top center;
}

应用场景

scale常用于：

• 按钮或图片的悬停放大效果
• 动画中元素的出现/消失（配合opacity）
• 响应式设计中的视觉反馈

基本上就这些。掌握transform: scale()，就能轻松实现网页元素的缩放变换，不影响文档流，性能也好。不复杂但容易忽略细节，比如缩放中心和过渡动画的搭配使用。