個々の変換プロパティ

ウェブ機能: 個別の変換プロパティ

transform プロパティを使用すると、指定した順序で複数の変換を適用できますが、1 つの変換を変更するには、変換チェーン全体を再指定する必要があります。このため、単一の変換をアニメーション化または遷移させるのが難しくなります。

個々の CSS 変換プロパティ（translate、rotate、scale）を使用すると、transform プロパティとは独立して変換を適用できます。このアプローチにより、たとえば :hover で単一の変換をオーバーライドすることが簡単になります。

主な実装の詳細

個々の変換プロパティは、CSS での順序に関係なく、常に固定された順序で適用されます。

  1. translate
  2. rotate
  3. scale
  4. 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 プロパティを使用します。なお、この方法では、異なる状態で 1 つの部分を変更する場合に、変換スタック全体を再宣言する必要があります。

.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;
  }
}