freeCodeCamp 课程实战：用 CSS transform 的 scale() 函数改变元素尺寸-育师

freeCodeCamp 课程实战：用 CSS transform 的 scale() 函数改变元素尺寸

【免费下载链接】freeCodeCampfreeCodeCamp.org's open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp

本文基于 freeCodeCamp 课程applied-visual-design模块中「Use the CSS Transform scale Property to Change the Size of an Element」这一课展开，讲解 CSStransform属性配合scale()函数缩放元素的核心语法与取值含义，并结合课程仓库中的练习种子代码、标准答案与测试断言，说明如何在真实练习场景中把元素精确放大 1.5 倍，以及scale与:hover、skewX等后续 transform 功能的衔接关系。读完本文，你将掌握scale()的参数含义、缩放与布局的关系，以及该知识点在课程代码中的完整落地方式。

课程定位与文档出处

这篇练习位于课程挑战文件 587d78a5367417b2b2512ad9.md，其 frontmatter 中的关键元信息为：

id: 587d78a5367417b2b2512ad9
title: Use the CSS Transform scale Property to Change the Size of an Element
challengeType: 0（标准编程题类型）
dashedName: use-the-css-transform-scale-property-to-change-the-size-of-an-element（用于生成学习路径 URL 的 slug）

在课程编排文件 applied-visual-design.json 的challengeOrder数组中，该挑战排在第 30 位，紧随「用 CSS 线性渐变做背景纹理」之后，其后依次是三个直接扩展 transform 主题的练习：

顺序	挑战 ID	标题
30	`587d78a5367417b2b2512ad9`	Use the CSS Transform scale Property to Change the Size of an Element（本文主题）
31	`587d78a5367417b2b2512ada`	Use the CSS Transform scale Property to Scale an Element on Hover
32	`587d78a6367417b2b2512adb`	Use the CSS Transform Property skewX to Skew an Element Along the X-Axis
33	`587d78a6367417b2b2512adc`	Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis

这种「先静态缩放，再悬停缩放，然后 skew」的编排，说明本课是整个 transform 系列的入门锚点。

核心语法：transform 属性与 scale() 函数

课程原文给出的概念介绍是：要改变元素的缩放比例，CSS 提供了transform属性及其scale()函数。课程原文示例——把页面上所有段落元素放大到 2 倍：

p { transform: scale(2); }

参数取值要点：

scale()接受一个无量纲的数值（如2、1.5、0.5），表示相对原始尺寸的倍数；1为原始大小，>1放大，<1缩小；
只传一个参数时，X 轴与 Y 轴按同一倍数等比缩放；scale(x, y)双参数形式可分别控制水平与垂直方向（课程后续练习会涉及）；
transform只改变元素的渲染层外观，不改变其在文档流中占据的原始盒尺寸——这是理解本课练习中「放大后球体位置不变」的关键。

练习场景：把 #ball2 放大到 1.5 倍

课程任务（instructions）要求：将 id 为ball2的元素尺寸放大到原来的 1.5 倍。

课程提供的种子代码（seed-contents）如下，页面包含两个使用同一.ball类、仅水平位置不同的圆形元素：

<style> .ball { width: 40px; height: 40px; margin: 50 auto; position: fixed; background: linear-gradient( 35deg, #ccffff, #ffcccc ); border-radius: 50%; } #ball1 { left: 20%; } #ball2 { left: 65%; } </style> <div class="ball" id="ball1"></div> <div class="ball" id="ball2"></div>

种子代码中#ball2规则内预留了空行，正是等待填入答案的位置。

标准答案与测试断言分析

课程给出的标准答案（solutions）只增加了一行声明：

#ball2 { left: 65%; transform: scale(1.5); }

该练习的验证逻辑在文档--hints--段中以内置断言形式给出：

assert.match(code, /#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi );

从这条正则可以确认两个可验证的实现事实：

断言只匹配#ball2这一条 ID 选择器规则，且要求其中出现transform: scale(1.5)——说明放大必须精确作用于#ball2，不能挂在.ball类上（否则#ball1也会被放大，且断言不会通过）；
正则用两个分支兼容了left: 65%;与transform: scale(1.5);的任意书写顺序，因此两种排列都合法。

这体现了该课程「用正则在真实代码串上做模式匹配」的自动判题方式，也是学习者自查答案是否会被判题器接受的可靠依据。

为什么选择 scale 而不是修改 width/height

在同一模块前序课程中，freeCodeCamp 已经用width/height属性讲过如何调整元素尺寸（见 applied-visual-design.json 中第 2、3 条挑战「Adjust the Width of an Element Using the width Property」「Adjust the Height of an Element Using the height Property」）。两者的差异可以结合本课种子代码理解：

若把width: 40px; height: 40px改成60px，需要同时改两个属性，且只影响这一个属性链；
而transform: scale(1.5)一行即可等比放大，并且作用于渲染结果（包括渐变背景、圆角形状一并被视觉放大），这是 transform 的通用能力——后续的rotate()、skewX()、skewY()、位移等函数都以同样的方式挂载在transform上。从 skewX 练习的原文描述也可以印证：「transform属性有一系列函数，可以缩放、移动、旋转、倾斜（skew）你的元素」。

与下一课的衔接：hover 状态下的 scale

紧随本课之后的练习「Use the CSS Transform scale Property to Scale an Element on Hover」把本课的静态缩放升级为交互态缩放，其给出的示例是：

p:hover { transform: scale(2.1); }

该课原文还特别提示：对div元素应用 transform 时，其包含的所有子元素也会一并受影响——这一行为在本课的.ball圆形元素上虽然没有子元素可观察，但理解这一点对于真实项目中给容器做缩放时预判内部布局变形很有帮助。

小结

transform: scale(n)中的n是相对原始尺寸的倍数：scale(2)放大 2 倍、scale(1.5)放大 1.5 倍，等比作用于 X/Y 轴；
本课的标准解法是在 587d78a5367417b2b2512ad9.md 种子代码的#ball2规则中追加transform: scale(1.5);，属性书写顺序不限；
判题断言锁定#ball2选择器，要求精确到该元素；
该课是 applied-visual-design 模块中 transform 知识链的起点，后续依次进入:hover动态缩放与skewX()/skewY()倾斜函数。