尚硅谷前端 2023 · 教程站

主题

变换 transform与过渡 transition（Day14 2/3） ​

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

学习目标 ​

  • 能使用 transform: rotate() 实现 2D 旋转，说明正负角度方向、默认以元素中心为旋转原点，并验证旋转不影响相邻元素布局。
  • 能在同一个 transform 中用空格分隔组合位移、旋转、缩放，实现“倒福”等案例，并解释书写顺序（尤其先旋转后位移）对坐标轴和最终效果的影响。
  • 能使用 transform-origin 的关键字或长度坐标设置变换原点，分别验证其对位移无影响、对缩放和旋转有影响。
  • 能通过父元素 transform-style: preserve-3d 开启 3D 空间，结合 perspective、perspective-origin 使用 translateZ()、rotateX()、rotateY()、rotate3d() 完成 3D 变换并观察近大远小效果。
  • 能使用 backface-visibility 控制元素背面可见性，并准确区分 transform、transform-origin、backface-visibility 应设置在变换元素本身，而 transform-style、perspective、perspective-origin 应设置在父元素。
  • 能使用 transition-duration、transition-delay、transition-property 实现悬停样式过渡，说明过渡属性应写在默认状态而非 :hover 状态的原因，并列举可过渡属性类型（长度、颜色、纯数字、变换、滤镜等）。

知识点 ​

本节围绕 transform 展开：它不改变文档流，只改变元素的“呈现形态”。下面按“为什么需要 → 怎么想 → 怎么做 → 易错点”把 2D、3D 变换和过渡串起来。

2D 旋转：让元素绕中心转起来 ​

为什么需要：旋转能强调元素、做倒福、做菱形等视觉效果。
怎么想：rotate() 的参数是角度，正角度顺时针，负角度逆时针；默认绕元素中心转，转 90° 立起来，180° 倒立，360° 回原位。
怎么做：

css
.book1 {
  transform: rotate(15deg);
}

易错点：旋转只影响元素自身，不影响相邻元素的布局；角度要带 deg；2D 旋转只有 rotate()，不要写成 rotateX()。

扭曲与矩阵：了解即可 ​

为什么需要：skew() 能做平行四边形，matrix() 能描述复杂变换，但实际开发很少用。
怎么想：skewX(30deg) 是沿 X 方向扭曲，skewY() 沿 Y 方向；matrix() 是六个值的变换矩阵，本质上是位移、旋转、缩放、扭曲的底层计算。
怎么做：

css
.book2 { transform: skewX(30deg); }
.book3 { transform: matrix(1, 0, 0, 1, 0, 0); }

易错点：扭曲会把矩形变成平行四边形，破坏“盒子感”；矩阵不必深究，正常开发几乎不用。

一个 transform 写多个变换：顺序会改变结果 ​

为什么需要：倒福案例既要从视口中心位移，又要旋转 45° 成菱形。
怎么想：多个变换不能写多个 transform，否则后面的覆盖前面的；要写在一个 transform 里，用空格分隔。顺序很关键：先位移再旋转，元素先到目标位置，再绕自身中心转；先旋转再位移，坐标轴已经跟着转了，位移方向就不再是横平竖直。
怎么做：

css
.book {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

调试过程：一开始写了两个 transform，刷新后不居中了；检查元素发现第一个 transform 被划掉，才知道必须合并成一条。
易错点：行内元素设置变换无效。倒福里的 span 直接 rotate(135deg) 没反应，改成 display: block 后才生效；行内元素没有宽高，变换“无处可变”。

变换原点 transform-origin ​

为什么需要：默认绕中心缩放/旋转，但有时要绕左上角、右下角或某个坐标点变。
怎么想：transform-origin 的值像 background-position，可以写关键字，也可以写两个长度；坐标原点在元素左上角。
怎么做：

css
.book2 {
  transform: scale(0.6);
  transform-origin: left top;
}
.book3 {
  transform: rotate(45deg);
  transform-origin: 100px 20px;
}

易错点：改原点对 translate() 没有影响，因为位移时元素上每个点移动距离相同；对缩放和旋转影响明显。只写一个关键字时，另一个方向默认 center，例如 right 表示右边、垂直居中。实际开发多用角或边，随便写坐标点很难想象。

3D 位移：开启 3D 空间与透视 ​

为什么需要：translateZ() 能让元素沿屏幕法线靠近或远离观察者，形成近大远小。
怎么想：Z 轴正方向朝观察者，负方向远离；但默认子元素在平面空间里，必须给父元素开 3D 空间，还要设置观察者距离，否则看不出近大远小。
怎么做：

css
.wrapper {
  transform-style: preserve-3d;
  perspective: 1000px;
}
.book1 {
  transform: translateZ(100px);
}
.book1 {
  transform: translate3d(200px, -50px, -100px);
}

易错点：transform-style: preserve-3d 和 perspective 都要给父元素；translate3d() 必须写三个值，少一个会报错；Z 轴负值离观察者更远，可能被父元素背景挡住。

3D 缩放与 3D 旋转 ​

为什么需要：3D 旋转能让元素沿 X 轴前后翻、沿 Y 轴左右转，做出立体感。
怎么想：rotateX() 绕横轴翻，rotateY() 绕竖轴转，rotateZ() 等价于 2D 旋转；rotate3d(x, y, z, angle) 前三个值用 0/1 表示是否绕该轴转，最后一个角度对所有轴相同。
怎么做：

css
.book3 { transform: rotateX(45deg); }
.book3 { transform: rotateY(45deg); }
.book3 { transform: rotate3d(1, 1, 0, 45deg); }
.book3 { transform: rotateZ(45deg); }

易错点：scaleZ() 目前没有效果，因为元素默认没有厚度；3D 旋转不设 perspective 也有变形，但没有近大远小，看起来像缩放；rotate3d() 不能让各轴转不同角度。

背面可见与六个属性的归属 ​

为什么需要：旋转超过 90° 会看到元素背面，可以控制背面是否显示。
怎么想：backface-visibility: hidden 让背面不可见，默认 visible。
怎么做：

css
.book3 {
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

易错点：六个属性要分清给谁：transform、transform-origin、backface-visibility 给变换元素自身；transform-style、perspective、perspective-origin 给父元素。只做 2D 变换时，前两个就够。

过渡：让变化慢下来 ​

为什么需要：鼠标悬停时宽度从 600px 变 1000px，默认瞬间完成，过渡能让它慢慢变。
怎么想：过渡要写在“变化之前”的选择器里，这样鼠标移入有过渡，移出也有过渡；写在 :hover 里，移出时选择器失效，过渡就没了。
怎么做：

css
.box {
  transition: 5s;
}
.box:hover {
  width: 1000px;
}

易错点：时间单位是 s 或 ms，写 0 也要带单位，否则可能不生效；不是所有属性都能过渡，长度、颜色、纯数字、transform、filter 通常可以，font-style、text-decoration 这类没有中间状态，不能过渡；transition-property 默认 all，需要单独指定时用逗号分隔属性名。

过渡解决什么问题 ​

为什么需要：元素样式变化如果只靠默认状态和 :hover 状态，浏览器会“瞬间切换”。转写稿中把宽度从 600px 改到 1000px，鼠标一放上去，宽度一下就变，根本不给人反应时间。过渡就是让属性值的变化在指定时间内逐步完成。

怎么想：过渡不是让页面自己动，而是“用户行为触发样式变化，浏览器再对可过渡的属性做补间”。所以要先有变化，再谈过渡。转写稿特别强调：写两个连续的 background 不算变化，浏览器会直接覆盖前一个，只执行最后一个；必须让默认选择器和 :hover 等状态选择器分别命中元素。

怎么做：最小示例只要给元素设置 transition-duration：

css
.box {
  width: 600px;
  height: 200px;
  padding: 20px;
  background: #900;
  color: #fff;
  transition-duration: 5s;
}
.box:hover {
  width: 1000px;
}

鼠标悬停后，宽度会用 5 秒从 600px 慢慢变到 1000px。

易错点：只写变化属性、不写过渡时间，就不会慢慢变；过渡时间单位是 s 或 ms，1s = 1000ms。转写稿中演示 transition-delay: 0 时发现 0 被划掉，加上单位 0s 才生效，调试时可用检查元素确认。

触发条件与选择器 ​

为什么需要：过渡要由用户行为触发，否则默认状态和变化状态没有“切换条件”。

怎么想：转写稿把过渡拆成两件事：一是“什么时候变化”，二是“哪些样式变化”。常用触发条件是伪类选择器：:hover、:active、:focus、:checked、:target 等；媒体查询和 JS 事件也能触发，但本节先用 :hover 感受。

怎么做：默认写基础样式，悬停写变化样式：

css
.box {
  transition-duration: 5s;
}
.box:hover {
  width: 1000px;
  background: #009;
  color: #990;
}

易错点：不要把所有变化都写成两个普通选择器；没有状态切换，就没有过渡过程。:hover 只表示鼠标悬停状态，离开后该选择器不再命中。

持续时间与延迟 ​

为什么需要：持续时间控制“变多久”，延迟控制“等多久再开始变”。

怎么想：transition-duration: 5s 表示变化过程持续 5 秒；transition-delay: 2s 表示触发后等 2 秒才开始过渡。转写稿中鼠标放上去后等 2 秒才变，鼠标离开也要等 2 秒才回弹。

怎么做：

css
.box {
  transition-duration: 5s;
  transition-delay: 2s;
}

易错点：延迟时间默认是 0，多数场景不必设置；时间值要带单位。小时、分钟多数浏览器不支持，而且对过渡没有实际意义。

设置位置与选择器匹配 ​

为什么需要：过渡属性写在哪里，决定鼠标离开时还有没有过渡。

怎么想：转写稿中的调试很关键：把 transition-duration 写进 .box:hover，鼠标悬停时有过渡，但一离开 :hover 选不中元素，过渡属性也消失，宽度会瞬间回弹。写到基础 .box 中，鼠标悬停和离开时都能选中元素，所以来回都有过渡。

怎么做：过渡相关属性放在“样式变化之前”的基础选择器中：

css
.box {
  transition-duration: 5s;
}
.box:hover {
  width: 1000px;
}

易错点：不要死记“写在变化前”，要理解选择器匹配：基础类名始终能命中，:hover 只在悬停时命中。

哪些属性可以过渡 ​

为什么需要：并不是所有 CSS 属性都能补间，写错属性不会有效果。

怎么想：转写稿通过测试发现：宽高、颜色、圆角、transform、filter 可以过渡；font-style: italic、text-decoration: underline 这类离散状态没有中间状态，所以没有过渡。

怎么做：可过渡属性大致包括：长度类（width、height、margin、padding、border-width、background-position、transform-origin、perspective-origin 等）、颜色类（color、background-color、border-color 等）、纯数字类（z-index、opacity）、变换 transform、滤镜 filter。滤镜如 blur(2px) 要带单位。

易错点：transition-property 里写属性名，不写属性值；多个属性用逗号分隔。

transition-property 控制范围 ​

为什么需要：默认所有可过渡且发生变化的属性都会过渡，但有时只想让某个属性慢慢变。

怎么想：transition-property 默认值是 all，表示能过渡的都过渡。指定属性后，只有指定属性有过渡，其他属性瞬间变化。

怎么做：

css
.box {
  transition-duration: 5s;
  transition-property: height, width, filter;
}
.box:hover {
  width: 1000px;
  height: 150px;
  background: #009;
  border-radius: 20px;
  filter: blur(2px);
}

转写稿中这样设置后，只有 height、width、filter 慢慢变，背景色、圆角等瞬间变。

易错点：属性名拼错不会报错但无效；不确定时用检查元素看哪些样式生效、哪些被划掉。实际开发中多数情况只设 transition-duration 就够用。

2D 旋转：rotate() ​

为什么需要：位移和缩放之外，旋转能让元素真正“转起来”，是做倒福、卡片翻转等效果的基础。
怎么想：rotate() 的参数是角度，默认绕元素中心旋转；正角度按表针方向转，负角度逆时针转；它只改变自身，不影响相邻元素布局。
怎么做：

css
.book01 {
  transform: rotate(15deg);
}

调试时把角度改成 90deg、180deg、360deg：90°立起来，180°倒立，360°回原位。转写稿里的“rotic/roate”应统一为 rotate。
易错点：角度必须带 deg；旋转不会让旁边元素重新排布。skew() 扭曲和 matrix() 矩阵只作了解，实际开发很少用。

多种变换与顺序：倒福案例 ​

为什么需要：一个元素常常既要居中位移，又要旋转；内部文字还要再转。
怎么想：一个元素只能写一个 transform，多个变换方法用空格隔开，不能写两个 transform 指望叠加。顺序很重要：先位移再旋转，因为旋转后坐标轴会跟着转。
怎么做：

css
.book {
  width: 200px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  font-size: 100px;
  background: #f00;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.book span {
  display: block;
  transform: rotate(135deg);
}
html
<div class="book"><span>福</span></div>

调试时会发现：写两个 transform，后一个覆盖前一个，元素就不居中了；给 span 加旋转没效果，因为行内元素不能变换，改成 display:block 后才生效。
易错点：多个变换要写在同一个 transform 里；行内元素设置变换无效；先旋转再位移会沿旋转后的坐标轴移动。

变换原点：transform-origin ​

为什么需要：缩放、旋转默认绕中心，有时要绕左上角或某个点。
怎么想：值可用关键字或坐标；它只明显影响缩放和旋转，对位移没有影响，因为位移时元素每个点移动距离相同。
怎么做：

css
.box {
  transform-origin: left top;
  transform: rotate(45deg);
}

只写一个关键字时，另一个方向默认 center。
易错点：坐标以元素左上角为参照；随意写坐标不易想象，实际多用角或边。

3D 位移：translateZ / translate3d ​

为什么需要：让元素沿 Z 轴靠近或远离观察者，形成近大远小。
怎么想：Z 正方向朝观察者，负方向远离；必须给父元素开启 3D 空间并设置透视距离。
怎么做：

css
.wrapper {
  transform-style: preserve-3d;
  perspective: 1000px;
}
.book01 {
  transform: translateZ(100px);
}
/* 或 */
.book01 {
  transform: translate3d(200px, -50px, -100px);
}

易错点：只写 translateZ 看不到效果，要给父元素设置；translate3d() 必须写三个值；父元素有背景色时，负 Z 子元素可能被挡住。

3D 旋转：rotateX / rotateY / rotateZ / rotate3d ​

为什么需要：让元素前后翻、左右转，形成立体旋转。
怎么想：rotateX() 绕横轴前后翻，rotateY() 绕竖轴左右转，rotateZ() 等同 2D 旋转；rotate3d(x,y,z,angle) 前三个用 0/1 表示是否绕该轴转，所有轴共用同一角度。
怎么做：

css
.book03 {
  transform: rotateX(45deg);
}
.book03 {
  transform: rotateY(45deg);
}
.book03 {
  transform: rotate3d(1, 1, 0, 45deg);
}

易错点：rotate3d() 必须四个参数；没有透视距离时近大远小不明显；rotateZ() 不要和 2D rotate() 搞混，本质相同。

其他 3D 设置 ​

为什么需要：控制观察者位置和元素背面是否可见。
怎么想：perspective-origin 设观察者位置，给父元素；backface-visibility 设元素背面可见性，给变换元素本身。
怎么做：

css
.wrapper {
  perspective-origin: left top;
}
.book {
  backface-visibility: hidden;
}

易错点：perspective-origin 要配合透视距离；背面不可见通常在旋转超过 90° 后明显。

过渡：transition ​

为什么需要：样式变化一下完成太生硬，过渡能让宽度、颜色、变换等慢慢变。
怎么想：先有触发条件，如 :hover；过渡属性要写在变化前的基础选择器里，不要只写在 :hover 里。时间单位是 s 或 ms。
怎么做：

css
.box {
  width: 600px;
  height: 200px;
  background: #900;
  color: #fff;
  transition: 5s;
}
.box:hover {
  width: 1000px;
}

还可设 transition-delay: 2s;、transition-property: width, height, filter;。
易错点：两个 transform 不会叠加；不是所有属性都能过渡，长度、颜色、纯数字、transform、filter 等通常可以；写 0 不生效时加单位 0s，用检查元素看哪条样式被划掉。

课堂画面 ​

课堂画面 1

课堂画面 2

课堂画面 3

课堂画面 4

课堂画面 5

课堂画面 6

代码示例 ​

示例 1：2D 变换与倒福（transform / transform-origin） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>2D变换：倒福</title>
  <style>
    body {
      margin: 0;
      height: 100vh;
      background: #f5f5f5;
    }

    .book {
      position: fixed;
      left: 50%;
      top: 50%;
      width: 200px;
      height: 200px;
      background: #f00;
      color: #000;
      text-align: center;
      line-height: 200px;
      font-size: 100px;
      font-family: 楷体, KaiTi, serif;

      /* 多个变换写在一个 transform 中，用空格隔开 */
      transform: translate(-50%, -50%) rotate(45deg);
      transform-origin: center center;
    }

    .book span {
      /* 行内元素设置变换无效，必须转成块级元素 */
      display: block;
      transform: rotate(135deg);
    }
  </style>
</head>
<body>
  <div class="book"><span>福</span></div>
</body>
</html>

要点解释：

  • transform: translate(-50%, -50%) rotate(45deg);：同一元素要同时位移和旋转，必须写在一个 transform 声明里，用空格隔开。
  • 如果写两个 transform，后一个会覆盖前一个，不会叠加。
  • 顺序有影响：先 translate 再 rotate，是先位移到居中位置，再以自身中心旋转；如果先旋转，坐标轴方向会改变，再位移就容易偏。
  • .book span { display: block; }：span 是行内元素，行内元素设置变换无效，必须变成块级元素。
  • transform-origin: center center;：变换原点默认就是元素中心；修改原点对位移没有影响，对旋转、缩放有明显影响。

示例 2：3D 变换（perspective / transform-style / rotateX / rotateY / backface-visibility） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>3D变换</title>
  <style>
    body {
      margin: 0;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #eee;
    }

    .stage {
      display: flex;
      gap: 50px;

      /* 观察者距离，也叫透视距离、景深 */
      perspective: 1000px;
      perspective-origin: center center;

      /* 给父元素开启3D空间 */
      transform-style: preserve-3d;
    }

    .book {
      width: 140px;
      height: 140px;
      background: #09f;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
    }

    .book1 {
      /* translate3d 必须写三个值 */
      transform: translate3d(0, 0, 100px);
    }

    .book2 {
      transform: rotateX(45deg);
    }

    .book3 {
      transform: rotateY(45deg);
    }

    .book4 {
      transform: rotateY(45deg);
      /* 元素背面不可见，给变换元素本身设置 */
      backface-visibility: hidden;
    }

    .book4:hover {
      transform: rotateY(120deg);
    }
  </style>
</head>
<body>
  <div class="stage">
    <div class="book book1">translateZ</div>
    <div class="book book2">rotateX</div>
    <div class="book book3">rotateY</div>
    <div class="book book4">背面隐藏</div>
  </div>
</body>
</html>

要点解释：

  • perspective: 1000px;：设置观察者距离，只有它参与时，translateZ 才能看出近大远小。
  • transform-style: preserve-3d;：要设置在父元素上，让子元素处于 3D 空间；它默认值是 flat。
  • translate3d(0, 0, 100px)：必须写三个值，少写会报错；translateZ 正值靠近观察者，负值远离。
  • rotateX(45deg) 是沿 X 轴前后翻，rotateY(45deg) 是沿 Y 轴左右转。
  • backface-visibility: hidden; 设置在变换元素本身；旋转超过 90 度后背面不可见。
  • rotate3d(x, y, z, angle) 需要 4 个参数，前三个用 0/1 表示是否沿该轴旋转，所有轴共用同一个角度。
  • scaleZ 在普通平面屏幕上没有厚度，通常看不出效果。

示例 3：过渡 transition（duration / delay / property） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>过渡 transition</title>
  <style>
    body {
      margin: 0;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f5f5f5;
    }

    .box {
      width: 600px;
      height: 200px;
      padding: 20px;
      background: #900;
      color: #fff;
      font-size: 28px;

      /* 过渡写在默认状态，鼠标离开时也有过渡 */
      transition-property: width, height, background-color, border-radius, filter, transform;
      transition-duration: 2s;
      transition-delay: 0s;
    }

    .box:hover {
      width: 1000px;
      height: 150px;
      background: #009;
      border-radius: 20px;
      filter: blur(2px);
      transform: translateX(100px);
    }
  </style>
</head>
<body>
  <div class="box">鼠标悬停看过渡</div>
</body>
</html>

要点解释：

  • 过渡相关属性要写在默认状态 .box 中，不要只写在 :hover 里；否则鼠标离开后选择器匹配不到，过渡属性消失，回来会瞬间还原。
  • transition-duration: 2s;：持续时间，单位是 s 或 ms；只写这一个通常就能看到过渡效果。
  • transition-delay: 0s;：延迟时间，单位也要写，0s 比单写 0 更稳妥。
  • transition-property 默认是 all，表示能过渡的属性都过渡；也可以只指定某些属性。
  • 能过渡的常见值：长度（宽高、内外边距、border-width、perspective-origin 等）、颜色（color、background-color 等）、纯数字（opacity、z-index 等）、transform、filter。
  • 不能过渡的常见例子：font-style、text-decoration 这类没有中间状态的属性。
  • filter: blur(2px); 中 2px 必须带单位，否则模糊不生效。

常见错误 ​

  1. 现象：元素既要位移又要旋转，后写的变换没生效
    原因： 同一元素写了多条 transform，后一条覆盖前一条，不会自动叠加。
    修法： 合并到同一条 transform 中，用空格分隔多个变换函数。

  2. 现象：给 span 等行内元素设置旋转/缩放没有效果
    原因： 行内元素没有稳定的宽高盒子，变换通常无效。
    修法： 先改为 display: block / inline-block / flex 等可形成盒子的显示方式，再设置变换。

  3. 现象：先旋转再位移，元素位置“跑偏”
    原因： 旋转后坐标轴方向随之改变，后续位移沿变换后的轴进行。
    修法： 明确变换顺序；需要页面方向位移时，通常先 translate 再 rotate，并在浏览器中验证。

  4. 现象：设置了 translateZ() 或 3D 旋转，但看不到近大远小/立体效果
    原因： 父元素未开启 3D 空间，或未设置观察距离。
    修法： 给变换元素的父元素设置 transform-style: preserve-3d，并按需设置 perspective。

  5. 现象：鼠标移入有过渡，移出时瞬间还原
    原因： 过渡属性写在 :hover 中，移出后该选择器失效，过渡配置也消失。
    修法： 把 transition 写在元素基础样式或触发前的状态中，:hover 只负责改变目标样式。

  6. 现象：只想让部分属性过渡，结果其他属性也动了或该动的没动
    原因： transition-property 写成了属性值，或未列全需要过渡的 CSS 属性名。
    修法： 写属性名并用逗号分隔，例如 width, height, filter；不确定时先用默认 all 排查。

  7. 现象：translate3d() 少写参数导致整条声明无效
    原因： translate3d() 必须写 X、Y、Z 三个长度值。
    修法： 补齐三个参数；只改一个方向时用 translateX() / translateY() / translateZ()。

  8. 现象：3D 翻转卡片背面仍然显示，或旋转后内容镜像可见
    原因： 未控制元素背面可见性，或相关属性设置到了错误元素上。
    修法： 在需要隐藏背面的变换元素本身设置 backface-visibility: hidden；父元素负责 3D 空间和透视。

练习 ​

  1. 倒福菱形居中：创建一个正方形红底元素，内部放“福”字；整体在视口居中并旋转成菱形，内部“福”字再旋转为倒置。要求只用一条 transform 完成外层位移与旋转，并处理行内元素问题。

  2. 悬停卡片过渡：卡片默认宽 600px、高 200px；悬停后宽度变 1000px、高度变 150px、背景色变化、加圆角、加模糊。要求只让宽、高、filter 过渡，其他变化瞬间完成，并保证鼠标移出时也有过渡。

  3. 3D 翻转卡片：制作父子结构卡片，父元素开启 3D 空间并设置透视距离；子元素绕 Y 轴旋转 180° 后隐藏背面。要求鼠标悬停时平滑翻转，移出后恢复。

  4. 变换原点对比：同一元素分别用默认原点和左上角原点执行缩放与旋转，写出两组样式，并说明观察到的差异。

  5. 错误诊断：给出一个包含“多条 transform、行内元素旋转、3D 旋转无父级 perspective、:hover 内写 transition”的代码片段，指出至少 4 处问题并改写关键声明。

原视频对照 ​

#视频时长
1变换-2D旋转08:59
2多种变换的案例09:45
3设置变换原点11:59
43D位移14:56
53D旋转14:10
63D变换其他样式设置14:34
7过渡25:26

小结 ​

  1. 多种变换必须合并到同一条 transform 中，覆盖不是叠加。
  2. 变换顺序会改变最终结果，旋转会改变后续位移所依据的坐标方向。
  3. 行内元素做变换前要先解决盒子模型问题。
  4. transform-origin 对位移基本无影响，对缩放、旋转影响明显。
  5. 3D 效果通常需要父级 transform-style: preserve-3d 和 perspective 配合。
  6. 过渡属性应写在触发前的稳定状态中，避免移出时过渡丢失。
  7. transition-property 控制“哪些属性过渡”，transition-duration 控制“过渡多久”。
  8. 3D 变换依赖空间想象，实际开发中应优先保证结构正确、效果可验证，不必强行记忆复杂组合结果。