当前位置：首页 > news >正文

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

news 来源：原创 2025/5/16 12:58:26

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

第五部分添加动效 ✔️
【第 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 本章小结 ✔️

文章目录

16.4 三维变换 3D transforms
- 16.4.1 控制透视距离 Controlling perspective
- 16.4.2 高级三维变换效果的实现 Implementing advanced 3D transforms
- - 16.4.2.1 perspective-origin 属性（Perspective-origin property）
  - 16.4.2.2 backface-visibility 属性（backface-visibility property）
  - 16.4.2.3 transform-style (preserve-3D) 属性（transform-style (preserve-3D) property）
16.5 本章小结 Summary

《CSS in Depth》新版封面

《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 下的三个坐标轴上的旋转效果图（虚线表示元素的初始位置）

【图 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 同一旋转变换在不同透视距离下的页面效果

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

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

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

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

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

【图 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 属性可以让多个元素共享相同的透视距离

【图 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.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 通过元素旋转来查看其背面效果

【图 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 属性（右侧）

【图 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 预处理器简介