standalone functions

standalone property

• scale, translate, rotate는 최상위에서 사용 가능하다.

사용 예시

애니메이션 겹침

• 아래 코드에서 scale 효과가 같은 transform 속성이기 때문에 적용되지 않음

@keyframes breathe {
    from {
      transform: scale(0.8);
    }
    to {
      transform: scale(1.2);
    }
  }
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  .elem {
    animation:
      breathe 1000ms ease-in-out infinite alternate,
      spin 12345ms linear infinite;
  }

해결법

아래처럼 독립 속성으로 사용하면 두 효과가 중복되지 않고 적용

@keyframes breathe {
    from {
      scale: 0.8;
    }
    to {
      scale: 1.2;
    }
  }
  @keyframes spin {
    from {
      rotate: 0deg;
    }
    to {
      rotate: 360deg;
    }
  }

2차원 변환

.elem {

/* Equivalent to “transform: scale(1.25, 0.75)”: */

scale: 1.25 0.75;

/* Equivalent to “transform: translate(20px, -50px)”: */

translate: 20px -50px;

}

1개의 값만 전달 시

translate는 x축에 적용, scale은 x,y 모두 적용

.elem {

/* For `translate`, the value is applied to the X axis: */

translate: 100px; /* Equivalent to `transform: translateX(100px)` */

/* For `scale`, the value is applied to both X and Y: */

scale: 1.5; /* Equivalent to `transform: scale(1.5, 1.5)` */

}

translateY, scaleY 등 단일 축에 사용하려면 다른 축에 기본 값을 설정해야 함

.elem {

/* Equivalent to “transform: scaleX(1.25)”: */

scale: 1.25 1;

/* Equivalent to “transform: translateY(123px)”: */

translate: 0 123px;

}

단점

• 단일 축 사용이 불편
• 3d 변환이나 skew를 사용할 수 없음
• 2025년 11월 기준 브라우저 지원이 완벽하지 않음 (94%)
• 변환순서가 미리 정의되어 제어 불가
  - 변환 순서
  1. scale
  2. rotate
  3. translate

결론

기본적으로 transform을 사용하되 일부 케이스에서만 독립 속성 사용하기!