服装设计网站模板下载,西安霸屏推广,如何对网站用户分析,万国企业网当前内容所在位置#xff08;可进入专栏查看其他译好的章节内容#xff09; 第五部分 添加动效 ✔️【第 16 章 变换】 ✔️ 16.1 旋转、平移、缩放与倾斜 16.1.1 变换原点的更改16.1.2 多重变换的设置16.1.3 单个变换属性的设置 16.2 变换在动效中的应用 16.2.1 放大图标可进入专栏查看其他译好的章节内容 第五部分 添加动效 ✔️【第 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 transforms16.4.1 控制透视距离 Controlling perspective16.4.2 高级三维变换效果的实现 Implementing advanced 3D transforms16.4.2.1 perspective-origin 属性Perspective-origin property16.4.2.2 backface-visibility 属性backface-visibility property16.4.2.3 transform-style (preserve-3D) 属性transform-style (preserve-3D) property 16.5 本章小结 Summary 《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 classrowdiv classboxOne/divdiv classboxTwo/divdiv classboxThree/divdiv classboxFour/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 与 rem2.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 还是 px12.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 本章小结 附录 附录ACSS 选择器参考附录BCSS 预处理器简介
