深入了解 CSS 单个变换属性

如果没有 CSS 转换属性的能力，您可能永远不会了解它。 正如我们今天所知，该功能是 CSS 的核心，也是用户界面 (UI) 的基石。 然而，近年来，CSS 并没有回避对其一些最基础的部分进行大修。 在用 flexbox 和 grid 重构了它的盒子模型 彻底改变了布局并用逻辑属性 之后，是时候介绍它的下一个演变了……

变换。

由于可能会出现许多微妙的 UI 交互，因此创建和编辑它们可以是任何事情都不是。 这是因为 CSS 有一个 transform属性来管理其所有不同的值，例如 rotate, scale， 和 translate.

转换单个值时，单个属性效果很好。 然而，当使用多个值时，它变成了一种繁重的认知负荷——CSS 试图通过引入单独的变换属性来解决认知负荷。

首先，让我们回顾一下当前 transform属性，然后发现如何通过使用新的单个变换属性来改进其功能。 让我们开始吧。

• 的挑战 transform财产

  • 使用它或失去它

  • 操作顺序

• 什么是 CSS 单独的变换属性？

• Individual transform properties considerations

  • 遗留的一些属性

  • transform-origin

  • 将值设置为 0

  • 这 will-change财产

• 整体表现

• 支持和后备

• 资源

的挑战 transform财产

为了了解单个变换属性的好处，让我们首先看看他们试图解决的两个关键挑战。 刚开始时，它们都不是很明显。

使用它或失去它

以下 transform属性不是太复杂。 它将缩放，平移，然后旋转元素。

.item {
  transform: scale(1.5) translate(0, 50%) rotate(90deg);
}

但是会发生什么 transform如果我们想改变比例 hover?

每一个 transform必须在每个状态中定义函数，否则它的值将丢失。 为了缩小项目 hover不失其 translate和 rotate值，它们都必须与更新的比例值一起复制。

.item:hover {
  transform: scale(0.5) translate(0, 50%) rotate(90deg);
}

对于单 hover状态，这可能不是太大的负担。 但是随着变换的增长或创建具有多帧的动画，这会变得更加复杂。

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验 了解更多 →

---

但是，需要复制每个 transform功能提出了另一个挑战。

操作顺序

使用多个函数创建转换时，请务必注意浏览器将按从左到右的顺序应用值。 这意味着尽管具有相同的值，但以下变换在视觉上会产生不同的结果。

.item:first-child {
  transform: scale(1.75) translate(0, 50%);
}
​
.item:last-child {
  transform: translate(0, 50%) scale(1.75);
}

在第一个项目缩放后，它将相对于其新大小进行平移。 同时，第二项将在翻译后缩放，导致元素的定位与第一项不完全相同。

​

​

As transformations grow more complex and more transform functions are used, the more difficult it becomes to manage the entire property. Take an animation with multiple frames as an example:

​

​

创建具有多个的动画时 transform值，在每个框架中以正确顺序管理每个属性的认知负荷可能会成为相当大的负担。

---

来自 LogRocket 的更多精彩文章：

• 不要错过 The Replay 来自 LogRocket 的精选时事通讯

• 了解 LogRocket 的 Galileo 如何消除噪音以主动解决应用程序中的问题

• 使用 React 的 useEffect 优化应用程序的性能

• 之间切换 在多个 Node 版本

• 了解如何 使用 AnimXYZ 为您的 React 应用程序制作动画

• 探索 Tauri ，一个用于构建二进制文件的新框架

• 比较 NestJS 与 Express.js

---

@keyframes animate {
  10%, 15% {
    transform: translateX(0);
  }
  16% {
    transform: translateX(0) scale(0.5);
  }
  18% {
    transform: translateX(0) scale(1.5);
  }
  20% {
    transform: translateX(0) scale(1);
  }
  50% {
    transform: translateX(50%) scale(1) rotate(180deg);
  }
  65% {
    transform: translateX(-50%) scale(1) rotate(180deg);
  }
}

正是这些挑战和认知负荷似乎可以通过引入 CSS 单独的转换属性来消除。

什么是 CSS 单独的变换属性？

CSS 引入了三个新的独立变换属性： rotate, scale， 和 translate.

.item {
  rotate: 180deg;
  scale: 1.5;
  translate: 50% 0;
}

这些新属性像传统一样工作 transform功能，但没有遗留挑战。

因为这些新的单个属性彼此独立，所以不需要跨状态复制值。 并且不需要跨状态复制值，顺序变得更容易管理，除了单个转换属性也不依赖于它们的顺序。

遗产在哪里 transform函数按从左到右的顺序应用，各个变换属性以更有利的顺序应用：1. 平移 2. 旋转 3. 缩放。

与合作的主要挑战 transform属性不碍事，之前的动画可以重构为更易管理和易读的 @keyframes如下所示的块：

​

​

@keyframes animate {
  10%, 15% {
    scale: 1;
    translate: 0;
  }
  16% {
    scale: 0.5;
  }
  18% {
    scale: 1.5;
  }
  20% {
    rotate: 0deg;
    scale: 1;
  }
  50% {
    rotate: 180deg;
    translate: 50% 0;
  }
  65% {
    rotate: 180deg;
    translate: -50% 0;
  }
}

个别变换属性注意事项

单独的变换属性在使用它们时需要一些其他注意事项，这些注意事项可能与它们的传统等效项不同。 我们将在下面更深入地讨论它们。

遗留的一些属性

虽然 CSS 引入了三个单独的属性 rotate, scale， 和 translate， 剩余的 transform功能没有被赋予相同的优先级。 正因为如此，个人和 transform属性可以一起工作。

您可以访问 MDN 获取 完整列表 transform功能 。

Snapmod自媒体必备工具，截图带手机型号边框软件，上千手机型号任意换！

transform-origin

转换元素时，通常还使用 transform-origin财产。 虽然大多数浏览器默认转换元素，例如从中心点旋转图像，但 transform-origin属性允许显式控制元素转换的点。

因为这两个属性有相似的名字， transform和 transform-origin，心智模型很清楚这两个属性是相关的——一个心智模型已经与单个变换属性脱节。

然而，尽管属性名称不再对齐， rotate, scale， 和 translate所有属性都作为转换，仍然遵守任何 transform-origin预期的值。 这意味着使用显式的现有转换 transform-origin可以重构点以使用单独的变换属性而不会产生任何冲突。

.item {
  scale: 1.5;
  transform-origin: top right;
}

将值设置为 0

当在 CSS 中设置几乎任何值时 0，通常可以接受不为该值提供任何单位。 当值为 0, 是否真的没关系 0px或者 0rem. 这同样适用于 transform属性和旋转功能。

.item {
  transform: rotate(90deg);
}
​
.item:hover {
  transform: rotate(0);
}

但是，当使用个人 rotate必须定义属性、单位或 CSS 关键字。

.item {
  rotate: 90deg;
}

.item:hover {
  //  Will not rotate without a unit
  rotate: 0;

  //  Will rotate with a unit specified
  rotate: 0deg;
}

这 will-change财产

很像 transform-origin，各个变换属性也与 will-change财产。 虽然， 使用时的考虑相同 will-change仍应遵循，例如仅在动画或变换已经遇到性能问题时才应用该属性。

如果 transform属性不会导致任何性能问题，切换到单个转换属性不会改变这一点。

整体表现

单个变换属性的使用与原始变换属性一样有效 transform财产。

支持和后备

如果不能使用 CSS 单个转换属性的好处，它们就毫无价值。 幸运的是，对这些属性的现代支持已经相当不错了，至少在所有主流浏览器的最新版本中都得到了支持，在 v104、Safari 14.1 和 Firefox 103 中引入了 Chrome 和 Edge。

然而，仅为最新版本的主要浏览器构建产品通常是一种幻想，而不是 Web 开发的现实。 但是由于单个变换属性可以直接映射到遗留 transform值，可靠的回退可用于渐进增强。

.container {
  rotate: 80deg;
  scale: 1.5;
  translate: 50% 10%;

  @supports not (scale: 1) {
    // Use transform fallback if CSS individual transform properties are not supported
    transform: translate(50%, 10%) rotate(80deg) scale(1.5);
  }
}

通过使用 @supports查询 not关键字，我们能够优先考虑较新的属性，仅在需要的环境中呈现回退。 但要小心，因为 transform属性取决于其值的顺序，在编写后备时必须牢记这一点。

为了使编写回退的过程更容易， 用于单个转换属性的 SCSS Mixin来自动化回退 可以使用 transform属性及其值的顺序。

结论

长期以来，转换一直是 CSS 的基本特征。 他们的互动定义了我们今天所知的网络。 随着个别变换属性的引入， rotate, scale， 和 translate，动画和变换的界限可能会被进一步推进。

这些特性还有什么用处？ 你还想看其他 transform函数，比如 skew和轴特定的功能，被移动到自己的属性？

如果不出意外，CSS 单独的变换属性有两个主要好处：

1. 变换和动画的介绍现在可能更适合初学者

2. 清理现有变换和动画的能力

仅出于这两个原因，单独的变换属性是向 CSS 基础的一个受欢迎的转变。

资源

• 旋转 、 缩放 和 平移 – MDN

• 旋转 、 缩放 和 平移 – Caniuse

• 使用单独的变换属性对 CSS 变换进行更细粒度的控制 – Bramus 和 L. David Baron

• CSS 独立变换属性 – Antoine Quint

• CSS 转换中的顺序 – Stefan Judis

• 单独的变换属性 SCSS Mixin – CodePen

• 单独的变换属性 Demos – CodePen

您的前端是否占用了用户的 CPU？

随着 Web 前端变得越来越复杂，资源贪婪的功能对浏览器的要求也越来越高。 如果您对监控和跟踪生产环境中所有用户的客户端 CPU 使用情况、内存使用情况等感兴趣，请 尝试使用 LogRocket 。

LogRocket 就像一个用于 Web 和移动应用程序的 DVR，记录您的 Web 应用程序或网站中发生的一切。 无需猜测问题发生的原因，您可以汇总和报告关键前端性能指标、重放用户会话以及应用程序状态、记录网络请求并自动显示所有错误。