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

【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 本章小结 ✔️

文章目录

  • 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() 函数,在水平和垂直方向上平移(即 xy 维度);也可以通过 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 属性进行变换时,还可以指定坐标轴的名称 xy 或者 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; /* 将镜头位置调至元素左下角 */
}

还是跟之前一样的透视距离,但是视角改变了,所有的盒子都移到了镜头的右侧。我们既可以使用关键字 topleftbottomrightcenter 来设置方位,也可以使用百分比或长度值来精确控制,并从元素的左上角开始计算偏移量(例如 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 属性设置多个变换特效。这些变换是从右到左生效的。
  • 利用单独的 scalerotatetranslate 属性可以实现更简单的变换效果。
  • CSS 的 transformopacity 属性是在过渡和动画特效中性能最好的两个属性。它们无需浏览器重新计算布局或重绘页面内容。
  • 在其他变换之后生效的 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 预处理器简介

http://www.mrgr.cn/news/81781.html

相关文章:

  • vue3使用element-plus,解决 el-table 多选框,选中后翻页再回来选中失效问题
  • 2024-12-25-sklearn学习(20)无监督学习-双聚类 料峭春风吹酒醒,微冷,山头斜照却相迎。
  • adb无法连接到安卓设备【解决方案】报错:adb server version (40) doesn‘t match this client (41);
  • windows下vscode使用msvc编译器出现中文乱码
  • 信息安全管理:通信与操作安全控制要点与管理策略
  • 通过交叉实现数据触底分页效果new IntersectionObserver()(html、react、vue2、vue3)中使用
  • 三层交换机配置
  • 003:如何理解 CNN 中的 RGB 图像和通道?
  • SpringBoot(Ⅱ)——@SpringBootApplication注解+自动装配原理+约定大于配置
  • win系统B站播放8k视频启用HEVC编码
  • 【蓝桥杯——物联网设计与开发】拓展模块5 - 光敏/热释电模块
  • Wend看源码-Java-集合学习(List)
  • unity学习1:第1个template的项目platformer 学习
  • 离散数学 群(半群,群,交换群,循环群,对称群,置换群,置换,交代群,轮换)详细,复习笔记
  • khadas edge2安装ubuntu22.04与ubuntu20.04 docker镜像
  • 各种网站(学习资源、常用工具及其他,持续更新中~)
  • 【高阶数据结构】红黑树封装map、set
  • 微服务——部署与运维
  • 1.微服务灰度发布落地实践(方案设计)
  • Fast adaptively balanced min-cut clustering
  • 指针详解之 难点、易错点一次性彻底击碎!
  • 【Java数据结构】LinkedList与链表
  • [OpenGL]使用 Compute Shader 实现矩阵点乘
  • 路由器刷机TP-Link tp-link-WDR5660 路由器升级宽带速度
  • SQL进阶技巧:如何分析双重职务问题?
  • C语言期末复习题(PTA)