【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() 函数来实现同样的效果。下面三个声明会产生同样的效果：

1. transform: translate(15px, 50px);
2. transform: translateX(15px) translateY(50px);
3. 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 标志

1. <div class="row">
2.   <div class="box">One</div>
3.   <div class="box">Two</div>
4.   <div class="box">Three</div>
5.   <div class="box">Four</div>
6. </div>

复制代码

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

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

复制代码

在本例中，每个盒子看上去都相同。它们都有本身的透视隔断，并利用 perspective() 函数举行定义。这个方法可以为单个元素设置透视隔断，示例中我们直接为所有盒子做了相同的设置，如许就像给每个元素分别单独拍照，但是拍摄位置是相同的。
   告诫
  perspective() 变换必须在盼望其影响的其他变换 之后 见效。也就是说，perspective() 在与单独的变换属性（如 rotate）结合利用时效果并不抱负，因为这些属性是在 transform 属性之后见效的。当利用 perspective() 变换时，应该将它列为第一项，然后在同一个 transform 声明中列出其他变换函数。
  有时候我们希望多个元素能共享同一套透视隔断，仿佛它们都处于相同的三维空间中。图 16.16 展示了这种情况的一个效果图。图中有四个相同的元素，并且它们都向着远方的一个相同的交汇点延伸，就仿佛把四个元素放一起然后拍了一张团体的照片。要实现这种效果，需要为它们的父元素设置 perspective 属性。

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

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

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

复制代码

通过为父容器（或其他祖先元素）设置统一的透视隔断，父容器包罗的所有应用了三维变换的子元素，都将共享这一相同的透视隔断。
添加透视隔断是三维变换中非常紧张的知识点。假如不设置透视隔断，既不能让离得较远的元素显小，也不会让离得较近的元素渲染得更大。上面的例子都比力简单，下一章我们还会把这些技术应用到一个实际案例中，实现元素从远处 “飞入” 的效果。
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 移动镜头位置的示例样式代码

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

复制代码

还是跟之前一样的透视隔断，但是视角改变了，所有的盒子都移到了镜头的右侧。我们既可以利用关键字 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 预处置惩罚器简介
    
  
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。