개별 변환 속성

웹 기능: 개별 변환 속성

transform 속성을 사용하면 지정된 순서로 여러 변환을 적용할 수 있지만, 단일 변환을 변경하려면 전체 변환 체인을 다시 지정해야 합니다. 이로 인해 단일 변환을 애니메이션화하거나 전환하기가 까다로워집니다.

개별 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-색인 또는 앵커 위치 지정과 관련하여 예기치 않은 동작을 일으킬 수 있습니다. 필수: :hover와 같은 상태 변경, 전환 또는 애니메이션의 일부로 요소에 변환이 적용될 수 있는 경우 기본 요소에 ID 변환을 적용합니다. 이렇게 하면 변환이 적용될 때 요소의 스택 컨텍스트와 포함이 변경되지 않습니다.

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