 函数改变元素尺寸)
freeCodeCamp 课程实战用 CSS transform 的 scale() 函数改变元素尺寸【免费下载链接】freeCodeCampfreeCodeCamp.orgs 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: 587d78a5367417b2b2512ad9title: Use the CSS Transform scale Property to Change the Size of an ElementchallengeType: 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标题30587d78a5367417b2b2512ad9Use the CSS Transform scale Property to Change the Size of an Element本文主题31587d78a5367417b2b2512adaUse the CSS Transform scale Property to Scale an Element on Hover32587d78a6367417b2b2512adbUse the CSS Transform Property skewX to Skew an Element Along the X-Axis33587d78a6367417b2b2512adcUse 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 classball idball1/div div classball idball2/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()倾斜函数。如需进一步深入可对照仓库中同模块的后续挑战文件与 挑战模式定义 了解课程文件从 Markdown 到可判题挑战的完整校验规则。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 freeCodeCamp 课程实战：用 CSS transform 的 scale() 函数改变元素尺寸
freeCodeCamp 课程实战用 CSS transform 的 scale() 函数改变元素尺寸【免费下载链接】freeCodeCampfreeCodeCamp.orgs 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: 587d78a5367417b2b2512ad9title: Use the CSS Transform scale Property to Change the Size of an ElementchallengeType: 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标题30587d78a5367417b2b2512ad9Use the CSS Transform scale Property to Change the Size of an Element本文主题31587d78a5367417b2b2512adaUse the CSS Transform scale Property to Scale an Element on Hover32587d78a6367417b2b2512adbUse the CSS Transform Property skewX to Skew an Element Along the X-Axis33587d78a6367417b2b2512adcUse 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 classball idball1/div div classball idball2/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()倾斜函数。如需进一步深入可对照仓库中同模块的后续挑战文件与 挑战模式定义 了解课程文件从 Markdown 到可判题挑战的完整校验规则。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考