单个转换属性

Web 功能：各个转换属性

transform 属性允许您按指定顺序应用多个转换，但对单个转换的任何更改都需要重新指定整个转换链。这使得为单个转换添加动画或过渡效果变得棘手。

借助各个 CSS 转换属性（translate、rotate 和 scale），您可以独立于 transform 属性应用转换。这种方法可以更轻松地替换单个转换，例如在 :hover 上。

关键实现细节

无论各个转换属性在 CSS 中的顺序如何，它们始终按固定顺序应用：

translate
rotate
scale
transform（最后应用）

如果您需要不同的顺序（例如，在旋转之前缩放），则必须继续使用 transform 属性函数。

转换函数不会覆盖各个转换属性。换句话说，scale: 2; transform: scale(3); 将首先扩缩 2 倍，然后再次扩缩 3 倍，总共扩缩 6 倍。

防止堆叠上下文和包含块发生意外更改

transform 属性和各个转换属性会影响页面的布局和渲染，并可能导致 z-index 或锚点定位出现意外行为。强制性：如果某个元素可能会在状态更改（例如 :hover）、过渡或动画过程中应用转换，请对基本元素应用恒等转换。这样可以确保在应用转换时，元素的堆叠上下文和包含关系不会发生变化。

.element{
  /* MANDATORY: Apply identity transformations for properties that will
     change on state changes (like :hover). This prevents unexpected layout
     or z-index shifts caused by creating a new stacking context only on hover. */
  translate: 0px;
  rotate: 0deg;
  scale: 1;
}
.element:hover{
  translate: 10px 10px;
  rotate: 20deg;
  scale: 0.8;
}

独立动画和过渡

主要优势在于，能够定义针对不同属性的重叠动画或过渡，而不会发生冲突。

.card {
  /* Define independent animations that don't overwrite each other */
  animation: float 3s infinite ease-in-out;
  
  /* Transition only the scale property for hover states */
  transition: scale 0.3s ease;

  /* Establish the base scale to prevent a sudden stacking context shift when transitioning on hover. */
  scale: 1;
}

.card:hover {
  /* Only the scale changes; the 'float' animation (translate) continues uninterrupted */
  scale: 1.05;
}

@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

后备策略

对于不支持单个转换属性的浏览器，请使用传统的 transform 属性。请注意，如果您想在不同状态下修改某个部分，则需要重新声明整个转换堆栈。

.element {
  /* Base transform */
  transform: translate(100px, 0) rotate(45deg);
  /* Specify the identity for the scale property. */
  scale: 1;
}

@supports not (translate: 0px) {
  .element:hover {
    /* Fallback: Must repeat translate and rotate even if only scale changes */
    transform: translate(100px, 0) rotate(45deg) scale(1.1);
  }
}

@supports (translate: 0px) {
  .element:hover {
    /* Modern: Only declare the change */
    scale: 1.1;
  }
}