尚硅谷前端 2023 · 教程站

主题

变换 transform（Day14 1/3） ​

本页对应 Day14_CSS3，共 7 段视频，约 1 小时 5 分。

学习目标 ​

  • 能使用 background-image 渐变配合 background-clip: text（含 -webkit- 前缀）和透明文字颜色实现渐变文字，并说明缺失任一步骤时的效果。
  • 能使用 repeating-linear-gradient 设置角度与颜色停止点，制作指定宽度的斜向条纹，并能调整条纹角度和宽度。
  • 能使用 transform: translate()/translateX()/translateY() 完成 2D 位移，正确设置长度或百分比，并说明百分比参照元素自身宽高、正负值方向及对文档流和相邻元素的影响。
  • 能使用 left: 50%; top: 50%; transform: translate(-50%, -50%) 实现宽高由内容撑开的定位元素水平垂直居中，并能说明相较负外边距和四边归零方案的优势与限制。
  • 能使用 transform: scale()/scaleX()/scaleY() 完成 2D 缩放，正确解释单值同时缩放、小数/负数等取值效果，以及缩放对元素整体和相邻元素布局的影响。
  • 能通过先设置较大 font-size 再使用 transform: scale() 缩小，实现视觉上小于 12px 的文字，并能说明缩放作用于整个元素而非仅字体。

知识点 ​

本节定位：CSS3 新增能力与 2D 变换 ​

本页先回顾 CSS3 的背景、边框、文本、渐变、滤镜、Web 字体，再用三个案例把“渐变文字、重复渐变条纹、2D 位移/缩放”串起来。学习时不要只记属性名，要抓住一条主线：CSS3 很多新属性要么在“盒子的哪一部分生效”，要么在“以元素自身为参照”。转写稿里反复出现的“参照自身”就是关键。

背景三件套：origin、clip、size ​

为什么需要：传统背景图只能铺在元素上，遇到“背景从哪算起点、超出哪裁掉、图片多大”就不好控制。
怎么想：把背景图想成一张纸，background-origin 决定纸从哪个盒子开始铺，background-clip 决定纸超出哪个盒子要裁掉，background-size 决定纸缩放多大。
怎么做：background-origin 常见值有 content-box、padding-box、border-box，默认是 padding-box；background-clip 常见值同样有这几个，默认是 border-box；background-size 可写两个长度，分别表示宽高，只写一个时高度按比例计算，也可用百分比和 cover/contain。
易错点：转写稿里的“orrange”应纠正为 background-origin；“包 gun books”对应 border-box 一类值。background-clip: text 在部分浏览器需要私有前缀，后面渐变文字会用到。百分比在 CSS3 新增长度属性里常参照元素自身，不要套用旧的内外边距参照父元素的习惯。

边框圆角与外轮廓 ​

为什么需要：圆角让盒子更柔和；外轮廓用于强调，但不占盒子空间。
怎么想：单角圆角记“先上下、后左右”的属性名顺序；多角圆角借用内外边距的 1~4 值规则。外轮廓像边框的“影子”，画在边框外边，但不影响盒子位置和大小。
怎么做：单角如 border-top-left-radius，可写一个值或两个值（X 半径、Y 半径）；border-radius 可写 1~4 个值，中间加斜杠时，斜杠左边是 X 半径、右边是 Y 半径，两边数量要一致。外轮廓用 outline-style/color/width，复合属性简写；outline-offset 控制外轮廓与边框的距离。
易错点：border-bottom-right-radius 不能把 bottom 和 right 写反；outline-offset 不是 outline 的子属性，不能硬塞进简写里。

文本样式升级与单行省略 ​

为什么需要：CSS3 让文本对齐、修饰线、溢出省略更细。
怎么想：把 text-decoration 拆成线型、风格、颜色三组；省略号不是 text-overflow 单独完成的，它依赖“强制一行 + 溢出隐藏”。
怎么做：text-align-last 控制最后一行对齐；text-decoration-line/style/color 分别控制线型、风格、颜色，风格里有实线、虚线、点线、双线、波浪线；white-space: nowrap 强制一行，overflow: hidden 隐藏溢出，text-overflow: ellipsis 显示省略号；text-shadow 只有偏移、模糊、颜色。
易错点：转写稿里的“tex declarationation”应纠正为 text-decoration；“overflow”在单词断行语境里实际是 word-break 一类问题，不要和 overflow 混写。只写 text-overflow: ellipsis 往往无效，因为缺少前两个前提。

渐变文字：背景裁剪到文字 ​

为什么需要：文字本身不能直接填渐变，但可以让“文字形状”露出背后的渐变。
怎么想：先给文字所在元素铺渐变背景，再把背景裁剪到文字区域，最后把文字颜色变透明，让背景透出来。
怎么做：转写稿整理出的核心写法是：

css
.box {
  background-image: linear-gradient(red, blue);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

调试过程很典型：先设 background-image，元素有渐变但文字仍是黑色；加 background-clip: text 仍不对，因为还少一步；补 color: transparent 后渐变才从文字里透出来。
易错点：只写裁剪不写透明文字，看不到效果；私有前缀要保留一份，兼容性更稳；渐变方向、颜色位置可调，但不要忘了文字本身还有字号、行高、字重。

重复渐变：从条纹到渐变文字花样 ​

为什么需要：条纹、彩条不必用图片，渐变就能生成。
怎么想：先写“不重复”的渐变，把颜色断点算清楚，再加 repeating- 让它循环。转写稿中黑到黑 0~10px、白到白 10~20px，就是在制造硬边条纹。
怎么做：

css
.box {
  background-image: repeating-linear-gradient(
    45deg,
    #000 0 10px,
    #fff 10px 20px
  );
}

调试时先少逗号、少 px，页面只看到黑条；补上逗号和单位，再加 repeating-linear-gradient，最后改 45deg 才得到斜条纹。
易错点：颜色位置不写单位会失效；重复渐变的关键是断点区间要闭合；渐变文字也能用类似思路做彩条字。

2D 位移：translate 不脱流 ​

为什么需要：让元素移动，但不想影响周围元素排版。
怎么想：transform 是属性名，translateX/translateY/translate 是变换方法。位移参照元素原位置，正负值控制方向。
怎么做：

css
transform: translateX(100px);   /* 右移 */
transform: translateY(-10px);   /* 上移 */
transform: translate(200px, 20px); /* 右下 */

只写一个值时，translate() 只设置 X 方向。百分比参照元素自身宽高。
易错点：转写稿强调“元素位移后，文档流位置没变”，所以下方段落不会跟着让位；它和相对定位很像，但不要和 margin 混淆——margin 百分比参照父元素，translate 百分比参照自身。

定位元素居中：translate(-50%, -50%) ​

为什么需要：传统 left:50%; top:50%; margin-left:-宽/2; margin-top:-高/2 要求宽高固定；内容撑开高度时就不知道负多少。
怎么想：先让左上角到包含块中心，再用 translate 按自身尺寸往回拉。
怎么做：

css
.box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

调试中 margin-left 负固定值可横向居中，但纵向高度由内容撑开时无法算；top:0; bottom:0; margin:auto 在无固定高度时会被拉开；translate(-50%,-50%) 的百分比参照自身，所以不需要固定宽高。
易错点：margin 的百分比参照包含块，不能替代 translate 的自身百分比；已经固定定位后不要再拿相对定位硬调。

2D 缩放与小于 12px 文字 ​

为什么需要：scale 可整体放大缩小；浏览器常限制文字最小 12px，但需求可能更小。
怎么想：scaleX/scaleY/scale 的参数是倍数，不是长度；只写一个 scale() 值时同时缩放 X、Y。小于 12px 可“先放大字号，再整体缩小”。
怎么做：

css
transform: scaleX(2);
transform: scaleY(1.2);
transform: scale(1.5);

小于 12px 示例：

css
.box02 {
  font-size: 20px;
  transform: scale(0.5);
}

易错点：scale 缩放的是整个元素，文字只是跟着变小；若要保持盒子视觉大小不变，宽高、内边距也要按倍数调整，并可用 transform-origin 调变换原点。转写稿里的“Orangeage”应理解为 transform-origin 的口误。缩放和位移一样，不改变相邻元素的文档流位置。

先保留本节回顾清单 ​

text
1. 背景
   1.1 新增3个背景属性
       background-origin
       background-clip
       background-size
   1.2 复合属性
   1.3 多背景图

2. 边框
   2.1 边框圆角
       ① 设置单个角圆角
       ② 同时设置多个角圆角
   2.2 外轮廓
       outline-style outline-color outline-widht outline outline-offset

3. 文本样式
   text-align-last
   text-decoration-line
   text-decoration-style
   text-decoration-color
   text-decoration
   overflow-wrap
   white-space
   text-overflow
   text-shadow

4. 渐变
   4.1 线性渐变 linear-gradient()
   4.2 径向渐变 radial-grdient()
   4.3 重复渐变 repeating-linear-gradient() repeating-radial-grdient()

5. 滤镜
   filter: blur() / grayscale()

6. WEB字体
   6.1 @font-face
   6.2 定制字体
   6.3 字体图标

下面按背景、边框、文本、渐变、滤镜与Web字体五块复盘；每块都按“为什么需要→怎么想→怎么做→易错点”展开。

背景：三个新属性、复合属性与多背景 ​

为什么需要：CSS3要更灵活地控制背景图从哪里开始定位、显示到哪个范围、尺寸多大，还要能叠加多张背景图。

怎么想：先分清三个子属性：background-origin管定位原点，background-clip管显示/裁剪范围，background-size管尺寸。复合属性background要处理origin和clip值相同形式的冲突；多背景图则用逗号分组。

怎么做：background-origin可取content-box、padding-box、border-box，默认padding-box；background-clip同样可取这三值，另有text（Chrome上要加-webkit-前缀），默认border-box；background-size可写两个长度/百分比，百分比参照元素自身宽高，只写一个长度时高度按比例计算，也可用cover、contain。复合属性里只写一个content-box时，会同时设置origin和clip；写两个值时第一个是origin、第二个是clip。多背景图用逗号分隔，每组独立设置。

易错点：background-size的百分比参照元素自身，不是父元素；background-clip:text要加私有前缀；复合属性两个值的顺序别写反；多背景图逗号分隔后每组参数不要混在一起。

边框：圆角与外轮廓 ​

为什么需要：圆角可以少用切图，外轮廓常用于焦点、强调，而且不影响盒子布局。

怎么想：单角圆角用border-top-left-radius这类属性，注意top在left前，属性名不能换序；多角圆角用border-radius，1到4值规则类似margin；斜杠可分别设置X半径和Y半径。外轮廓属性类似边框，另有outline-offset设置轮廓与边框的距离。

怎么做：单角可写一个值，或两个值分别表示X/Y半径；border-radius: 10px 20px 30px 40px;；border-radius: 10px/20px;。外轮廓可写outline: 1px solid #900; outline-offset: 4px;。

易错点：单角属性名不能把top和left互换；border-radius斜杠两边值的数量必须一致；外轮廓不是盒子的一部分，不影响元素位置和大小；outline-offset不是outline的子属性。

文本样式：修饰线、断词、单行省略与阴影 ​

为什么需要：CSS3增强了文本修饰和排版控制，单行省略也是列表、卡片里的常见需求。

怎么想：把text-decoration-line/style/color放成一组记；overflow-wrap管单词内部是否允许断行；white-space:nowrap强制一行，再配overflow:hidden和text-overflow:ellipsis才能出省略号；text-shadow比盒子阴影少一些参数。

怎么做：text-align-last设最后一行对齐，默认start；text-decoration复合值没有顺序和数量要求；overflow-wrap:break-word;；单行省略三件套：

css
.ellipsis{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

text-shadow: 2px 2px 4px #000;。

易错点：只写text-overflow不能出省略号；white-space:nowrap比pre更常用于强制一行，因为真需要pre格式可直接用pre标签；text-decoration复合值顺序不固定，因为值本身能区分属性。

渐变：线性、径向、重复与两个调试案例 ​

为什么需要：渐变用代码生成图像，减少图片请求；重复渐变可做条纹。

怎么想：渐变不是颜色，而是图像，常作为background-image的值；线性渐变关注方向和颜色列表，颜色后可带位置；重复渐变加repeating-前缀。渐变文字的思路是：元素背景做渐变，再裁剪到文字，最后让文字透明。

怎么做：线性渐变可写linear-gradient(45deg, #000 0 10px, #fff 10px 20px)；重复条纹加repeating-。渐变文字示例：

css
.box{
  background-image: linear-gradient(red, blue);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

调试过程：先只设背景渐变，会看到整块元素都有渐变；加background-clip:text后仍可能看不到，因为文字颜色还没透明；补color:transparent才出来。条纹案例先写不重复的linear-gradient，会发现条纹只出现一段、后面不循环；加repeating-linear-gradient后再把角度调成45deg。

易错点：radial-gradient拼写别错；颜色位置别漏单位；background-clip:text要前缀；渐变文字本质是背景裁剪，不是给color设渐变。

滤镜与Web字体 ​

为什么需要：滤镜能快速做模糊、灰度；Web字体让页面使用自定义字体和字体图标。

怎么想：filter后接方法名和参数，常用blur()、grayscale()；@font-face引入字体，但中文字体文件太大，适合英文网站或只定制少量字；字体图标本质是字体文件里的图标字形，用行内元素或i标签更合适。

怎么做：filter: blur(5px);、filter: grayscale(100%);；@font-face{ font-family:...; src:url(...); }；定制字体只设计需要的几个字；字体图标引入字体文件后设font-family，再用对应字符或类名。

易错点：滤镜方法要带括号；grayscale(100%)会让整个元素变灰；中文字体不要整包引入，影响加载速度；字体图标不是图片，字符编码和类名要对上。

先明确：transform 是一组“变换方法” ​

为什么需要：普通布局能让元素排队、定位，但遇到“只改变视觉位置/大小、不改变文档流占位”的需求时，直接改 margin、left 往往会影响其他元素，或者必须知道元素固定宽高。transform 就是专门做视觉变换的属性。

怎么想：转写稿里强调，transform 后面写的不是普通长度，而是一类“变换方法”，如 translateX()、translateY()、translate()、scaleX()、scaleY()、scale()。这些方法分 2D 和 3D 两大类，本节先聚焦 2D 位移与缩放。注意属性名是 transform，位移方法名是 translate，不要和过渡的 transition 混在一起。

怎么做：基本形式是：

css
.box {
  transform: translateX(100px);
}

易错点：transform 是属性，translate 是值里的方法；转写稿里口误的“ski / SCLE”应写成 scale，不要写成错误方法名。

2D 位移：translateX / translateY / translate ​

为什么需要：想让元素往左、往右、往上、往下“挪一下”，但又不想改变它在文档流里的占位时，就用位移。

怎么想：位移分三个方法：translateX() 只横向移动，translateY() 只纵向移动，translate() 同时设置 X、Y。参数是长度，可以写 px，也可以写百分比，还可以写负值。转写稿里的调试过程是：先给父容器加虚线边框做参照，再给子元素加半透明背景，移动后观察它相对原位置偏了多少。

怎么做：

css
.box1 {
  transform: translateX(100px);  /* 向右 100px */
}
.box2 {
  transform: translateY(-10px);  /* 向上 10px */
}
.box3 {
  transform: translate(200px, 20px); /* 右下 */
}

关键规则：translateX() 的百分比参照元素自身宽度，translateY() 的百分比参照元素自身高度；translate() 只写一个值时，只设置 X 方向，这一点和 scale() 不同。

易错点：位移后元素“看起来”动了，但文档流里原来的位置还在，所以不会把后面的段落挤走。转写稿专门加了一个段落验证：给上方元素做 translateY(100px)，下面的段落并没有跟着下移。它和相对定位很像，但不要以为它改变了布局占位。

案例：定位元素居中 ​

为什么需要：过去做定位居中常用 left:50%; top:50%; margin-left:-宽/2; margin-top:-高/2，但元素高度一旦由内容撑开，就不知道 margin-top 该写多少；用 left/right/top/bottom:0; margin:auto 也要求元素有固定宽高。

怎么想：先让元素左上角到包含块中心，再把元素自身向左、向上各挪“自身宽高的一半”。translate(-50%,-50%) 的百分比正好参照元素自身，不需要知道固定宽高。

怎么做：

css
.dialog {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

调试过程：转写稿先只写 left:50%; top:50%，看到的是元素左上角在中心；再加上 translate(-50%,-50%) 后才真正居中。它也解释了为什么不能简单用 margin-left:-50%：外边距百分比参照的是包含块，不是元素自身。

易错点：translate(-50%,-50%) 的两个百分比分别对应自身宽、高；不要和 margin 百分比混用。这个方案不需要固定宽高，是转写稿里认为最优秀的定位居中方案。

2D 缩放：scaleX / scaleY / scale ​

为什么需要：需要把元素整体放大或缩小时，用宽高一个个改很麻烦，而且会影响布局；scale() 可以只做视觉缩放。

怎么想：缩放参数不是长度，而是“原来的多少倍”，写数字或百分比。scaleX() 只横向缩放，scaleY() 只纵向缩放，scale() 同时设置 X、Y。scale(2) 是两倍，scale(.5) 或 scale(50%) 是一半。转写稿调试时先给元素加背景色和居中，再分别试 scaleX(2)、scaleY(1.2)、scale(2,.8)，观察盒子模型和文字变化。

怎么做：

css
.box1 {
  transform: scaleX(2);
}
.box2 {
  transform: scaleY(1.2);
}
.box3 {
  transform: scale(2, 0.8);
}
.box4 {
  transform: scale(1.5); /* 同时缩放 X、Y */
}

易错点：scale() 只写一个值时，X、Y 同时缩放；而 translate() 只写一个值时只动 X。缩放默认以元素中心为基点，放大缩小两边一起变；它也不影响相邻元素布局。负值会翻转，0 会消失，实际开发很少这样用。

案例：实现小于 12px 的文字 ​

为什么需要：浏览器通常有最小字号限制，直接写 font-size:10px 往往仍按 12px 显示。转写稿说，正常应先和设计师/产品经理沟通规避；如果非要实现，可以用“先放大字号，再整体缩放”的办法。

怎么想：先把文字设成 20px，再用 scale(.5)，视觉上接近 10px。但要注意：scale 缩放的是整个元素，不只是文字；文字只是跟着元素一起缩小。

怎么做：

css
.text {
  font-size: 20px;
  transform: scale(0.5);
}

调试过程：转写稿先直接给 font-size:10px，发现无效；改成 20px + scale(.5) 后文字变小。随后又给元素加宽高、内边距和背景色，发现盒子也整体缩小了；若希望缩小后盒子仍保持原尺寸，需要把宽高、内边距按比例放大。转写稿还提到可用 transform-origin 调整缩放中心，但本节没有展开。

易错点：不要以为 scale 只缩文字；它缩的是整个元素。直接写小于 12px 的字号通常无效。百分比在 scale 里只是比例，不是长度。

课堂画面 ​

课堂画面 1

课堂画面 2

课堂画面 3

课堂画面 4

课堂画面 5

课堂画面 6

代码示例 ​

示例一：渐变文字 + 重复渐变条纹 ​

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>渐变文字 / 重复渐变条纹</title>
  <style>
    * { margin: 0; padding: 0; }

    /* 1. 渐变文字 */
    .box {
      font-size: 100px;
      text-align: center;
      line-height: 300px;
      font-weight: 800;
      background-image: linear-gradient(90deg, red, blue);
      -webkit-background-clip: text;  /* Chrome/Safari 需要私有前缀 */
      background-clip: text;          /* 火狐等标准写法 */
      color: transparent;             /* 或 rgba(0,0,0,0) */
    }

    /* 两个颜色位置相同，做成"半红半蓝"的硬边 */
    .box02 {
      background-image: linear-gradient(red 50%, blue 50%);
    }

    /* 换个角度，斜向渐变 */
    .box03 {
      background-image: linear-gradient(15deg, red, blue);
    }

    /* 2. 重复渐变做条纹 */
    .stripe {
      width: 600px;
      height: 100px;
      margin: 30px auto;
      border: 1px solid #ccc;
      background-image: repeating-linear-gradient(
        45deg,
        #000 0,    #000 10px,
        #fff 10px, #fff 20px
      );
    }
  </style>
</head>
<body>
  <div class="box">渐变文字</div>
  <div class="box box02">渐变文字</div>
  <div class="box box03">渐变文字</div>
  <div class="stripe"></div>
</body>
</html>

要点解释

  • 渐变等价于"用代码创建的一张图像"，所以必须写在一个以图像为值的属性上，典型就是 background-image，它和 url() 是平级的。
  • background-clip: text 让背景只在文字范围内显示，Chrome 下必须配 -webkit- 前缀，同时写一条不带前缀的兼容火狐。
  • color: transparent 不能漏，否则文字本身的不透明颜色会盖住背景渐变，看不到效果。
  • 颜色后面的位置（50%）用来控制渐变区间，两个颜色写同一个位置就能做出"泾渭分明"的硬边，彩条字也是这么做的。
  • 条纹的核心是 repeating-linear-gradient() 里"同色两个位置"：#000 0, #000 10px 表示 0–10px 纯黑，#fff 10px, #fff 20px 表示 10–20px 纯白，然后整体重复。
  • 易错点：单位 px 不能漏写，只写数字会整段失效；不写 repeating- 时，20px 之后没有颜色定义，看起来只有一条黑条。

示例二：2D 位移 + 定位元素居中 ​

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>2D 位移</title>
  <style>
    * { margin: 0; padding: 0; }

    /* 父元素只做参照 */
    .wrapper {
      width: 300px;
      height: 100px;
      border: 4px dashed #900;
      margin: 20px auto;
    }

    .box {
      width: 300px;
      height: 100px;
      padding: 20px;
      box-sizing: border-box;
      background: rgba(0, 166, 166, .5);
      color: #fff;
    }

    .box01 { transform: translateX(100px); }        /* 水平位移 */
    .box02 { transform: translateY(-10px); }        /* 垂直位移，负值向上 */
    .box03 { transform: translate(-200px, 20px); }  /* 同时设置 X、Y */

    p {
      width: 600px;
      padding: 20px;
      background: #ccc;
    }

    /* 定位元素居中：最优秀的方案 */
    .center {
      width: 200px;
      padding: 20px;
      background: #009;
      color: #fff;
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div class="wrapper"><div class="box box01">translateX(100px)</div></div>
  <div class="wrapper"><div class="box box02">translateY(-10px)</div></div>
  <div class="wrapper"><div class="box box03">translate(-200px, 20px)</div></div>
  <p>元素位移后，不影响其他元素在文档流中的位置</p>
  <div class="center">定位元素居中</div>
</body>
</html>

要点解释

  • 属性名是 transform，位移的变换方法叫 translate（两个都是 trans 开头，不要写混，后面还有过渡的 transition）。
  • translateX() 管水平、translateY() 管垂直、translate(x, y) 同时设置两个方向；translate() 只写一个值时，只做 X 方向位移。
  • 位移的长度正负都行，正值向右/向下，负值向左/向上；用百分比时参照的是元素自身的宽和高（X 参照宽度、Y 参照高度），不是父元素。
  • 元素位移后不脱离文档流，在文档流里占的位置不变，也不影响相邻元素排列，这点和相对定位一样，和 margin 不一样。
  • 居中方案：left/top: 50% 把元素左上角放到包含块中心，再用 translate(-50%, -50%) 往回挪自身宽高的一半，不需要元素有固定宽高。
  • 易错点：过去用 margin-left: -50% 为什么不行？因为外边距的百分比参照的是父元素宽度，达不到挪自身一半的目的；而 translate 的百分比参照自身。

示例三：2D 缩放 + 实现小于 12px 的文字 ​

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>2D 缩放</title>
  <style>
    * { margin: 0; padding: 0; }

    .wrapper { width: 300px; margin: 20px auto; }

    .box {
      width: 300px;
      height: 100px;
      padding: 20px;
      box-sizing: border-box;
      background: #099;
      color: #fff;
    }

    .box01 { transform: scaleX(2); }      /* X 方向放大 2 倍 */
    .box02 { transform: scaleY(1.2); }    /* Y 方向放大 1.2 倍 */
    .box03 { transform: scale(2, .8); }   /* X 放大 2 倍，Y 缩小到 0.8 倍 */

    p { text-align: center; }

    /* 浏览器最小字号 12px，直接写 10px 无效 */
    .book01 { font-size: 12px; }

    /* 先放大再整体缩小，等效得到小于 12px 的字 */
    .book02 {
      font-size: 20px;
      transform: scale(.5);
    }
  </style>
</head>
<body>
  <div class="wrapper"><div class="box box01">scaleX(2)</div></div>
  <div class="wrapper"><div class="box box02">scaleY(1.2)</div></div>
  <div class="wrapper"><div class="box box03">scale(2, .8)</div></div>
  <p class="book01">12px 的文字</p>
  <p class="book02">10px 的文字</p>
</body>
</html>

要点解释

  • 缩放方法的参数是倍数，是纯数字，没有单位；可以是整数、小数（1.5、.8），也可以是百分比（50% 等同于 0.5）。
  • scaleX() / scaleY() 单独控制某个方向，scale(x, y) 同时设置；只写一个值时，X 和 Y 同时缩放——这一点和 translate 只写一个值只影响 X 方向不同，是本节最容易记混的地方。
  • 缩放以元素中心为基点，是元素整体放大缩小，里面的文字只是跟着一起变了；所以它不影响相邻元素的排版位置，放大后重叠就重叠。
  • 负数（如 -1）会把元素翻转过来；0 则等于元素消失，一般不用。
  • 小于 12px 文字的思路：font-size 直接写 10px 浏览器会按 12px 渲染，所以先给一个较大的字号（如 20px），再 scale(.5) 整体缩小，视觉上就得到 10px 的字。
  • 易错点：缩放是整体缩，元素宽高、内边距、背景都会一起变小；如果想让缩小后盒子尺寸不变，得先把宽高、内边距按倍数放大（如宽 600、高 200、padding 40），缩小后再用 transform-origin 之类的属性调整位置。

常见错误 ​

  1. 现象：写了 transform: translateX(100px) 元素不动或控制台报错 → 原因：属性名与方法名混淆，把 transform 写成 translate，或方法名拼错 → 修法：CSS 属性固定用 transform，方法名按 translateX/translateY/translate/scaleX/scaleY/scale 写，重点检查拼写。
  2. 现象：translate(50%) 没有按父容器居中 → 原因：transform 里的百分比参照元素自身宽高，不是包含块 → 修法：居中场景用 left:50%; top:50%; transform:translate(-50%,-50%)，不要用 margin 负百分比硬算。
  3. 现象：元素 transform 后相邻元素跟着移动或布局被挤开 → 原因：把 transform 当 margin/padding/定位 使用，误以为会改变文档流占位 → 修法：明确 transform 只做视觉变换；要改变排版占位用 margin/padding/定位，只做视觉位移用 transform。
  4. 现象：只写 translate(100px) 以为上下左右都动；只写 scale(1.5) 以为只放大 X → 原因：单值规则记混：translate 单值只 X，scale 单值同时 XY → 修法：需要 Y 写 translateY() 或 translate(x,y)；需要分轴缩放写 scaleX/scaleY 或 scale(x,y)。
  5. 现象：渐变文字不显示，或整块背景都出现渐变 → 原因：只设了渐变背景，没有裁剪到文字，也没有让文字透明 → 修法：渐变写在 background-image，加 background-clip:text（含 -webkit- 前缀），再设 color:transparent。
  6. 现象：条纹只出现一条或不重复 → 原因：用了普通 linear-gradient，色标漏单位，或没加 repeating- → 修法：改用 repeating-linear-gradient，色标补 px，方向与条宽一起核对。
  7. 现象：text-overflow:ellipsis 不生效 → 原因：缺少单行与溢出前提 → 修法：同时具备定宽/最大宽、white-space:nowrap、overflow:hidden，再配 text-overflow:ellipsis。
  8. 现象：font-size:10px 仍显示为 12px → 原因：浏览器最小字号限制 → 修法：先设较大字号再用 transform:scale() 整体缩放；注意元素整体尺寸也变，必要时同步调整宽高、内边距或 transform-origin。

练习 ​

  1. 用重复线性渐变做一个 45° 黑白条纹条，条宽 10px；写出关键声明，并解释色标为什么这样设置。
  2. 实现一个“渐变文字”标题：要求 WebKit 与标准写法都保留，并说明 color 为什么必须处理。
  3. 做一个固定定位弹层，宽高由内容撑开，在视口中水平垂直居中；要求不用固定宽高、不用负 margin。
  4. 给一段单行标题实现超长省略号；再实现“10px 小字”需求，说明 transform:scale() 方案的副作用及规避思路。
  5. 诊断题：给出含 transform:translate(100px)、transform:scale(1.5)、相邻元素受影响的代码片段，找出至少 3 处问题并改正。

原视频对照 ​

#视频时长
1回顾16:28
2渐变文字案例05:11
3重复渐变实现条纹效果03:04
4变换-2D位移16:20
5变换-2D位移案例-定位元素居中05:18
6变换-2D缩放08:48
7变换-2D缩放案例-设置小于12的文字10:20

小结 ​

  1. transform 是视觉变换，不改变文档流占位，也不影响相邻元素排版；不要拿它替代布局属性。
  2. 三个“trans”要分清：属性 transform、位移方法 translate、过渡属性 transition，拼写和用途都不能串。
  3. transform 百分比参照元素自身尺寸，这是定位居中方案优于负 margin 的关键。
  4. 单值规则不统一：translate 单值只 X，scale 单值同时 XY，写之前先确认轴向。
  5. 渐变本质是图像值，常与 background-image 配合；渐变文字必须“裁剪到文字 + 文字透明”组合使用。
  6. text-overflow 是组合技，单行、溢出隐藏、定宽缺一不可；不要单独使用。
  7. 浏览器最小字号、私有前缀、中文字体体积都是工程约束，方案要带兼容与降级意识。