【CSS in Depth 2 精译_096】16.4：CSS 中的三维变换 + 16.5：本章小结

当前内容所在位置（可进入专栏查看其他译好的章节内容）

• 第五部分 添加动效 ✔️
• 【第 16 章 变换】 ✔️
  • 16.1 旋转、平移、缩放与倾斜
    • 16.1.1 变换原点的更改
    • 16.1.2 多重变换的设置
    • 16.1.3 单个变换属性的设置
  • 16.2 变换在动效中的应用
    • 16.2.1 放大图标（上）
    • 16.2.2 带“飞入”特效的文本标签的创建（下）
    • 16.2.3 过渡特效的交错渲染（下）
  • 16.3 动画的性能
  • 16.4 三维变换 ✔️
    • 16.4.1 控制透视距离 ✔️
    • 16.4.2 高级三维变换效果的实现 ✔️
  • 16.5 本章小结 ✔️

《CSS in Depth》新版封面

译者按
上一篇我们学习了 CSS 的底层渲染原理，这一篇就来实际应用一下相关知识点。虽然 CSS 的 3D 变换在实际工作中用得并不多，但了解里面最基本的概念和典型案例，对于构建完整的 CSS 知识体系而言也是至关重要的。除了作者提到的延伸材料外，相关属性的实际应用案例还可以参考《Tiny CSS Projects》这本书的相关章节，可以更好地理解本节的核心概念。

16.4 三维变换 3D transforms

到目前为止我们使用的变换都是二维的。这些变换是最容易处理的（也最常见），因为页面本身就是二维的。但我们不应该止步于此，旋转和平移都可以在三个维度上实现：x 轴、y 轴和 z 轴。

我们可以像之前那样使用 translate() 函数，在水平和垂直方向上平移（即 x 和 y 维度）；也可以通过 translateX() 和 translateY() 函数来实现同样的效果。下面三个声明会产生同样的效果：

transform: translate(15px, 50px);
transform: translateX(15px) translateY(50px);
translate: 15px 50px;

我们还可以使用 translateZ() 函数、或者给 translate 属性提供第三个参数值来实现 z 轴上的平移变换。从概念上看，这个 z 值相当于通过平移的方式让该元素更靠近或远离用户。

同理，也可以让元素绕着三个不同的坐标轴进行旋转。但与平移不同的是，我们已经非常熟悉 rotateZ() 函数了，因为 rotateZ() 也是 rotate() 的别名，它就是绕着 z 轴旋转的。函数 rotateX() 和 rotateY() 分别围绕水平方向上的 x 轴（使元素向前或向后倾斜（pitching））和垂直方向上的 y 轴（使元素向左或者向右转动或 偏移（yawing））旋转。有关这些函数的具体示例，如图 16.13 所示。

【图 16.13 透视距离为 300px 下的三个坐标轴上的旋转效果图（虚线表示元素的初始位置）】

在使用 rotate 属性进行变换时，还可以指定坐标轴的名称 x、y 或者 z，并带上角度值，例如 rotate: z 20deg 或者 rotate: x 30deg。

16.4.1 控制透视距离 Controlling perspective

在给页面添加三维变换特效前，我们需要先明确一个概念，即 透视距离（perspective）。变换后的元素共同构成了一个 3D 场景。随后浏览器会计算该 3D 场景的 2D 图像并渲染到屏幕上。我们可以把透视距离想象成 “摄像机” 与场景之间的距离，前后移动镜头就可以改变整个场景在最终图像中的展示方式。

如果镜头离得较近（即透视距离小），那么 3D 效果会比较强；如果镜头离得较远（即透视距离大），则 3D 效果就比较弱。图 16.14 列出了几种不同的透视距离效果。

【图 16.14 同一旋转变换在不同透视距离下的页面效果】

左侧这个旋转后的元素没有设置透视距离，看起来不太像是 3D 的。它只是在水平方向上做了些压缩，并没有什么立体感。不设置透视距离的三维变换看上去像是平的（flat）；元素中 “更远” 的那部分并没有渲染得小一些。另一方面，中间那个盒子设置了 400px 的透视距离，其右边缘（即距离观察者较远的那一边），看起来小了些；而离观察者较近的这一侧看上去则变大了些。右边的盒子透视距离更短，只有 100px。这样就大大增强了 3D 效果，使得元素边缘离得越远，图像缩小得也就越明显。

我们可以通过两种方式来指定透视距离：使用 perspective() 变换，或者使用 perspective 属性（property）。两种方式略有不同。下面通过一个简单的示例来说明。这是个简化版示例，仅用于演示透视距离的页面效果。

首先，我们为四个元素添加旋转特效，使用 rotateX() 将它们向后倾斜（如图 16.5 所示）。因为每个元素旋转同样的角度，并且设置了相同的 perspective() 变换，所以它们看上去是一样的。

【图 16.15 四个元素都围绕 x 轴旋转、并且均设置了 perspective(200px) 后的效果图】

为这个演示案例新建一个页面，并复制以下代码清单 16.12 中的 HTML。

代码清单 16.12 用于演示三维变换及透视效果的四个盒子 HTML 标记

<div class="row"><div class="box">One</div><div class="box">Two</div><div class="box">Three</div><div class="box">Four</div>
</div>

接着，我们给每个盒子添加 3D 变换和透视距离。同时也可以来点颜色和内边距样式，略微扩充些尺寸大小，让最终效果更加明显。请根据代码清单 16.13 同步更新本地样式表。

代码清单 16.13 给盒子添加三维变换特效的示例样式代码

.row {display: flex;gap: 4em;justify-content: center;
}.box {box-sizing: border-box;width: 150px;padding: 60px 0;text-align: center;background-color: oklch(60% 0.12 158deg);transform: perspective(200px) rotateX(30deg); /* 令盒子向后旋转 30 度角，并指定透视距离 */
}

在本例中，每个盒子看上去都相同。它们都有自己的透视距离，并利用 perspective() 函数进行定义。这个方法可以为单个元素设置透视距离，示例中我们直接为所有盒子做了相同的设置，这样就像给每个元素分别单独拍照，但是拍摄位置是相同的。

警告

perspective() 变换必须在期望其影响的其他变换 之后 生效。也就是说，perspective() 在与单独的变换属性（如 rotate）结合使用时效果并不理想，因为这些属性是在 transform 属性之后生效的。当使用 perspective() 变换时，应该将它列为第一项，然后在同一个 transform 声明中列出其他变换函数。

有时候我们希望多个元素能共享同一套透视距离，仿佛它们都处于相同的三维空间中。图 16.16 展示了这种情况的一个效果图。图中有四个相同的元素，并且它们都向着远方的一个相同的交汇点延伸，就仿佛把四个元素放一起然后拍了一张整体的照片。要实现这种效果，需要为它们的父元素设置 perspective 属性。

【图 16.16 为公共祖先元素设置 perspective 属性可以让多个元素共享相同的透视距离】

要查看这样的效果，可以移除各元素盒上的 perspective() 函数，并在其父容器上设置 perspective 属性。具体样式如代码清单 16.14 所示。

代码清单 16.14 建立统一透视距离的示例样式代码

.row {display: flex;gap: 4em;justify-content: center;perspective: 200px; /* 在容器上添加透视距离 */
}
.box {box-sizing: border-box;width: 150px;padding: 60px 0;text-align: center;background-color: oklch(60% 0.12 158deg);transform: rotateX(30deg); /* 不在盒子本身设置透视距离 */
}

通过为父容器（或其他祖先元素）设置统一的透视距离，父容器包含的所有应用了三维变换的子元素，都将共享这一相同的透视距离。

添加透视距离是三维变换中非常重要的知识点。如果不设置透视距离，既不能让离得较远的元素显小，也不会让离得较近的元素渲染得更大。上面的例子都比较简单，下一章我们还会把这些技术应用到一个实际案例中，实现元素从远处 “飞入” 的效果。

16.4.2 高级三维变换效果的实现 Implementing advanced 3D transforms

在对元素进行三维变换时，还有其他一些很有用的属性（properties）。我不打算花太多精力讲解这些属性，因为在实际开发中应用场景寥寥无几（few and far between）。但了解它们的存在也是有必要的，万一今后用得上也不错。想要更深入地研究这些属性，稍后我也会提供几个线上的示例。

16.4.2.1 perspective-origin 属性（Perspective-origin property）

默认情况下，透视距离的渲染是假设观察者（或相机镜头）位于元素中心的正前方。perspective-origin 属性可以上下、左右移动镜头位置。图 16.17 展示了刚才的示例，只是镜头移到了左下角位置。

【图 16.17 移动透视原点后，元素向远端延伸的形变增加了】

请根据代码清单 16.15 同步更新本地样式表，查看上述演示效果。

代码清单 16.15 利用 perspective-origin 移动镜头位置的示例样式代码

.row {display: flex;justify-content: center;perspective: 200px;perspective-origin: left bottom; /* 将镜头位置调至元素左下角 */
}

还是跟之前一样的透视距离，但是视角改变了，所有的盒子都移到了镜头的右侧。我们既可以使用关键字 top、left、bottom、right 和 center 来设置方位，也可以使用百分比或长度值来精确控制，并从元素的左上角开始计算偏移量（例如 perspective-origin: 25% 25%）。

本例演示的效果较为夸张，原因在于透视距离相对较近，仅有 200px。您也可以将该距离调大些，让页面的立体感没那么强烈。

16.4.2.2 backface-visibility 属性（backface-visibility property）

如果使用 rotateX() 或者 rotateY() 旋转元素超过 90 度，就会发现一些有趣的现象：元素的 “正面” 不再直接朝向您；相反，它是背对您的。您会看到元素的背面。如图 16.18 所示，图中元素设置了 rotateY(180deg) 的变换特效，看上去就像是之前元素的镜像图片。

【图 16.18 通过元素旋转来查看其背面效果】

这就是元素背面的效果图。默认情况下背面是可见的，但我们可以为该元素设置 backface-visibility: hidden 来进行修改。添加这句声明后，元素只有在正面朝向观察者的时候才是可见的，而朝向反面时将被隐藏起来。

这项技术的一个可能的应用场景，是把两个元素背靠背放在一起，就像卡片的正反两面。卡片的正面展示出来，背面则隐藏。然后我们可以旋转它们的容器元素，让这两个元素同时翻转过来，使得正面隐藏、背面则会显现。卡片翻转特效的演示案例，可以参考这篇文章：《Intro to CSS 3D Transforms: Card Flip》。

16.4.2.3 transform-style (preserve-3D) 属性（transform-style (preserve-3D) property）

如果要使用嵌套元素来构建复杂的 3D 场景，transform-style 属性就变得非常重要。假设我们已经对容器设置了透视距离，接下来对容器内的元素进行三维变换。容器元素在渲染时，实际上会被绘制成二维场景，如同三维对象的一张照片。这看起来没什么问题，因为元素终将渲染到二维屏幕上。

但如果这时对容器元素进行三维旋转，就会出问题：这样做没能对整个场景进行旋转，只是旋转了三维场景下的二维图像。透视距离全都错了，场景中的立体感也被破坏了。相关的页面效果如图 16.19 所示。

【图 16.19 如果对 3D 变换元素的父元素再进行 3D 变换，可能需要启用 preserve-3d 属性（右侧）】

左图展示了通过把六个面变换到相应位置创建的一个 3D 立方体效果；中间的图片展示的是对整个立方体（即它们的父元素）使用变换后的效果。为了修正这个问题，应该在父元素上声明 transform-style: preserve-3d。

想要了解更多讲解内容和实用案例，可以查看 Ana Tudor 的线上教程，详见：https://davidwalsh.name/3d-transforms。虽然这些示例很有意思，但我从未在实际项目中用过 preserve-3d。如果您决定上手试试三维变换，想看看可以实现哪些效果，这份教程会很有帮助。

---

16.5 本章小结 Summary

• CSS 变换可以在二维和三维中缩放、旋转、平移和倾斜元素。
• 可以使用 transform 属性设置多个变换特效。这些变换是从右到左生效的。
• 利用单独的 scale 、 rotate 和 translate 属性可以实现更简单的变换效果。
• CSS 的 transform 和 opacity 属性是在过渡和动画特效中性能最好的两个属性。它们无需浏览器重新计算布局或重绘页面内容。
• 在其他变换之后生效的 perspective() 变换会让这些变换效果看起来具有三维立体感。您还可以将 transform 属性设置到容器元素上，让子元素共享同一个三维场景。
• 自定义的定时函数曲线可以实现过渡特效中的 “弹跳” 效果。

---

---

关于《CSS in Depth》（中译本书名《深入解析 CSS》）

	第 1 版	第 2 版
读者评分	原版：4.7（亚马逊）；中文版：9.3（豆瓣）	原版：5.0（亚马逊）；中文版：暂无，待出版
出版时间	原版：2018 年 3 月；中文版：2020 年 4 月	原版：2024 年 7 月；中文版：暂无，待出版
原价	原版：$44.99；中文版：￥139.00	原版：$59.99；中文版：暂无，待出版
现价	原版：$36.49；中文版：￥52.54 起步	原版：$52.09；中文版：暂无，待出版
原版国内预订	起步价 ￥461.00	起步价 ￥750.00

本专栏为该书第 2 版高分译文专栏，全网首发，精译精校，持续更新，计划今年内完成全书翻译，敬请期待！！！

目前已完结的章节（可进入本专栏查看详情，连载期间完全免费）：

• 第一章 层叠、优先级与继承（已完结）
  • 1.1 层叠
  • 1.2 继承
  • 1.3 特殊值
  • 1.4 简写属性
  • 1.5 CSS 渐进式增强技术
  • 1.6 本章小结
• 第二章 相对单位（已完结）
  • 2.1 相对单位的威力
  • 2.2 em 与 rem
  • 2.3 告别像素思维
  • 2.4 视口的相对单位
  • 2.5 无单位的数值与行高
  • 2.6 自定义属性
  • 2.7 本章小结
• 第三章 文档流与盒模型（已完结）
  • 3.1 常规文档流
  • 3.2 盒模型
  • 3.3 元素的高度
  • 3.4 负的外边距
  • 3.5 外边距折叠
  • 3.6 容器内的元素间距问题
  • 3.7 本章小结
• 第四章 Flexbox 布局（已完结）
  • 4.1 Flexbox 布局原理
  • 4.2 弹性子元素的大小
  • 4.3 弹性布局的方向
  • 4.4 对齐、间距等细节处
  • 4.5 本章小结
• 第五章 网格布局（已完结）
  • 5.1 构建基础网格
  • 5.2 网格结构剖析 （上）
    • 5.2.1 网格线的编号（下）
    • 5.2.2 网格与 Flexbox 配合（下）
  • 5.3 两种替代语法
    • 5.3.1 命名网格线
    • 5.3.2 命名网格区域
  • 5.4 显式网格与隐式网格（上）
    • 5.4.1 添加变化 （中）
    • 5.4.2 让网格元素填满网格轨道（下）
  • 5.5 子网格（全新增补内容）
  • 5.6 对齐相关的属性
  • 5.7 本章小结
• 第六章 定位与堆叠上下文（已完结）
  • 6.1 固定定位
    • 6.1.1 创建一个固定定位的模态对话框
    • 6.1.2 在模态对话框打开时防止屏幕滚动
    • 6.1.3 控制定位元素的大小
  • 6.2 绝对定位
    • 6.2.1 关闭按钮的绝对定位
    • 6.2.2 伪元素的定位问题
  • 6.3 相对定位
    • 6.3.1 创建下拉菜单（上）
    • 6.3.2 创建 CSS 三角形（下）
  • 6.4 堆叠上下文与 z-index
    • 6.4.1 理解渲染过程与堆叠顺序（上）
    • 6.4.2 用 z-index 控制堆叠顺序（上）
    • 6.4.3 深入理解堆叠上下文（下）
  • 6.5 粘性定位
  • 6.6 本章小结
• 第七章 响应式设计（已完结）
  • 7.1 移动端优先设计原则（上篇）
    • 7.1.1 创建移动端菜单（下篇）
    • 7.1.2 给视口添加 meta 标签（下篇）
  • 7.2 媒体查询（上篇）
    • 7.2.1 深入理解媒体查询的类型（上篇）
    • 7.2.2 页面断点的添加（中篇）
    • 7.2.3 响应式列的添加（下篇）
  • 7.3 流式布局
  • 7.4 响应式图片
  • 7.5 本章小结
• 第八章 层叠图层及其嵌套
  • 8.1 用 layer 图层来操控层叠规则（上篇）
    • 8.1.1 图层的定义（上篇）
    • 8.1.2 图层的顺序与优先级（下篇）
    • 8.1.3 revert-layer 关键字（下篇）
  • 8.2 层叠图层的推荐组织方案
  • 8.3 伪类 :is() 和 :where() 的用法
  • 8.4 CSS 嵌套的使用
    • 8.4.1 嵌套选择器的使用
    • 8.4.2 深入理解嵌套选择器
    • 8.4.3 媒体查询及其他 @规则 的嵌套
  • 8.5 本章小结
• 第九章 CSS 的模块化与作用域
  • 9.1 模块的定义
    • 9.1.1 模块和全局样式
    • 9.1.2 一个简单的 CSS 模块
    • 9.1.3 模块的变体
    • 9.1.4 多元素模块
  • 9.2 将模块组合为更大的结构
    • 9.2.1 模块中多个职责的拆分
    • 9.2.2 模块的命名
  • 9.3 CSS 的作用域
    • 9.3.1 CSS 作用域的就近原则
    • 9.3.2 划定作用域的边界
    • 9.3.3 CSS 中的隐式作用域
    • 9.3.4 关于 CSS 作用域与层叠图层
  • 9.4 CSS 模式库
  • 9.5 本章小结
• 第十章 CSS 容器查询
  • 10.1 容器查询的一个简单示例
    • 10.1.1 容器尺寸查询的用法
  • 10.2 深入理解容器
    • 10.2.1 容器的类型
    • 10.2.2 容器的名称
    • 10.2.3 容器与模块化 CSS
  • 10.3 与容器相关的单位
  • 10.4 容器样式查询的用法
    • 10.4.1 将模块与所在容器解耦
    • 10.4.2 减少重复代码
  • 10.5 本章小结
• 第 11 章 颜色与对比
  • 11.1 通过对比进行交流
    • 11.1.1 模式的建立
    • 11.1.2 还原设计稿
  • 11.2 颜色的定义
    • 11.2.1 色域与色彩空间
    • 11.2.2 CSS 颜色表示法（RGB、Hex、HSL、HWB、LAB/OKLAB、LCH/OKLCH）
  • 11.3 利用 OKLCH 处理颜色（上篇）
    • 11.3.4 从页面其他颜色衍生出新颜色（下篇）
  • 11.4 思考字体颜色的对比效果
  • 11.5 本章小结
• 第 12 章 CSS 排版与间距
  • 12.1 间距设置
    • 12.1.1 使用 em 还是 px
    • 12.1.2 对行高的深入思考
    • 12.1.3 行内元素的间距设置
  • 12.2 Web 字体
  • 12.3 谷歌字体
  • 12.4 @font-face 的工作原理
    • 12.4.1 字体格式与回退处理
    • 12.4.2 同一字型的多种变体形式
  • 12.5 性能因素考量
    • 12.5.1 font-display 属性解析
    • 12.5.2 可变字体的用法
  • 12.6 调整字间距，提升可读性
    • 12.6.1 正文的字间距
    • 12.6.2 标题、小元素和间距
  • 12.7 本章小结
• 第 13 章 渐变、阴影与混合模式
  • 13.1 渐变
    • 13.1.1 使用多个颜色节点（上）
    • 13.1.2 颜色插值方法（中）
    • 13.1.3 径向渐变（下）
    • 13.1.4 锥形渐变（下）
  • 13.2 阴影
    • 13.2.1 利用渐变和阴影打造立体感
    • 13.2.2 使用扁平化设计创建元素
    • 13.2.3 创建混合风格的按钮外观
  • 13.3 混合模式
    • 13.3.1 为图片上色
    • 13.3.2 混合模式的类型
    • 13.3.3 图片纹理的添加
    • 13.3.4 融合混合模式的用法
  • 13.4 本章小结
• 第 14 章 蒙版、形状与剪切
  • 14.1 滤镜
    • 14.1.1 滤镜的类型
    • 14.1.2 背景滤镜
  • 14.2 蒙版
    • 14.2.1 带渐变效果的蒙版特效
    • 14.2.2 基于亮度来定义蒙版
    • 14.2.3 其他蒙版属性
  • 14.3 剪切路径
    • 14.3.1 多边形的裁剪路径
    • 14.3.2 Firefox 内置的剪切路径工具
    • 14.3.3 其他剪切路径类型
  • 14.4 浮动与形状
    • 14.4.1 浮动
    • 14.4.2 形状的定义
  • 14.5 本章小结
• 第 15 章 过渡
  • 15.1 状态间的由此及彼
  • 15.2 定时函数
    • 15.2.1 定制贝塞尔曲线
    • 15.2.2 阶跃
  • 15.3 非动画属性
    • 15.3.1 不可添加动画效果的属性
    • 15.3.2 淡入与淡出
  • 15.4 过渡到自然高度
  • 15.5 自定义属性的过渡设置
  • 15.6 本章小结
• 附录
  • 附录A：CSS 选择器参考
  • 附录B：CSS 预处理器简介