translate, rotate, scale 속성으로 요소 변환
CSS transform 속성
요소에 변환을 적용하려면 CSS transform 속성을 사용합니다. 이 속성은 차례로 적용되는 <transform-function>를 하나 이상 허용합니다.
.target {
transform: translateX(50%) rotate(30deg) scale(1.2);
}
타겟팅된 요소는 X축에서 50% 변환되고 30도 회전한 후 최종적으로 120%로 확장됩니다.
transform 속성은 잘 작동하지만 이러한 값을 개별적으로 변경하려면 약간 지루한 작업이 될 수 있습니다.
마우스 오버 시 배율을 변경하려면 값이 변경되지 않은 상태로 유지되더라도 변환 속성의 모든 함수를 복제해야 합니다.
.target:hover {
transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}
개별 변환 속성
Chrome 104를 통한 배송은 CSS 변환의 개별 속성입니다. 속성은 scale, rotate, translate이며, 이를 사용하여 변환의 이러한 부분을 개별적으로 정의할 수 있습니다.
이를 통해 Chrome은 이미 이들 속성을 지원하는 Firefox 및 Safari와 통합됩니다.
위의 transform 예를 개별 속성으로 다시 작성하면 스니펫은 다음과 같습니다.
.target {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}
순서가 중요
원래 CSS transform 속성과 새 속성의 한 가지 주요 차이점은 선언된 변환이 적용되는 순서입니다.
transform를 사용하면 변환 함수가 왼쪽 (외부)에서 오른쪽 (내부)으로 작성된 순서대로 적용됩니다.
개별 변환 속성의 순서는 선언된 순서가 아닙니다. 순서는 항상 동일합니다. 즉, 첫 번째 translate(외부), rotate, 내부 scale입니다.
즉, 다음 두 코드 스니펫 모두 동일한 결과를 제공합니다.
.transform--individual {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}
.transform--individual-alt {
rotate: 30deg;
translate: 50% 0;
scale: 1.2;
}
두 경우 모두 타겟팅된 요소는 먼저 X축의 50%에 의해 변환되고 30deg에 의해 회전되고 최종적으로 1.2에 의해 조정됩니다.
개별 변환 속성 중 하나가 transform 속성과 함께 선언되면 개별 변환이 먼저 적용되고(translate, rotate, scale) 마지막에 transform가 내부에 적용됩니다. 자세한 내용은 변환 행렬 계산 방법을 정의하는 사양을 참고하세요.
애니메이션
이러한 속성을 추가한 주된 이유는 애니메이션을 더 쉽게 만들기 위해서입니다. 다음과 같이 요소에 애니메이션을 적용한다고 가정해 보겠습니다.
transform 사용
transform를 사용하여 이 애니메이션을 구현하려면 정의된 모든 변환의 사이의 값을 모두 계산하고 각 키프레임에 포함해야 합니다. 예를 들어 10% 표시에서 회전을 실행하려면 transform 속성에 모든 값이 필요하므로 다른 변환의 값도 계산해야 합니다.
그 결과로 나오는 CSS 코드는 다음과 같습니다.
@keyframes anim {
0% { transform: translateX(0%); }
5% { transform: translateX(5%) rotate(90deg) scale(1.2); }
10% { transform: translateX(10%) rotate(180deg) scale(1.2); }
90% { transform: translateX(90%) rotate(180deg) scale(1.2); }
95% { transform: translateX(95%) rotate(270deg) scale(1.2); }
100% { transform: translateX(100%) rotate(360deg); }
}
.target {
animation: anim 2s;
animation-fill-mode: forwards;
}
개별 변환 속성 사용
개별 변환 속성을 사용하면 훨씬 쉽게 작성할 수 있습니다. 키프레임에서 키프레임으로 모든 변환을 드래그하는 대신 각 변환을 개별적으로 타겟팅할 수 있습니다. 또한 더 이상 이러한 모든 값을 계산할 필요가 없습니다.
@keyframes anim {
0% { translate: 0% 0; }
100% { translate: 100% 0; }
0%, 100% { scale: 1; }
5%, 95% { scale: 1.2; }
0% { rotate: 0deg; }
10%, 90% { rotate: 180deg; }
100% { rotate: 360deg; }
}
.target {
animation: anim 2s;
animation-fill-mode: forwards;
}
개별 변환 속성 및 여러 키프레임 사용
코드를 모듈식으로 만들려면 각 하위 애니메이션을 고유한 키프레임 세트로 분할하면 됩니다.
@keyframes move {
0% { translate: 0% 0; }
100% { translate: 100% 0; }
}
@keyframes scale {
0%, 100% { scale: 1; }
5%, 95% { scale: 1.2; }
}
@keyframes rotate {
0% { rotate: 0deg; }
10%, 90% { rotate: 180deg; }
100% { rotate: 360deg; }
}
.target {
animation: move 2s, scale 2s, rotate 2s;
animation-fill-mode: forwards;
}
이 분할 덕분에 이제 개별 속성이 된 transform 속성이 더 이상 서로를 덮어쓰지 않으므로 원하는 대로 별도의 키프레임 세트를 각각 적용할 수 있습니다. 위에서 전체 내용을 다시 쓸 필요 없이 각 변환에 다른 시간을 지정할 수 있습니다.
성능
이러한 새 속성을 사용하는 애니메이션은 기존 transform 속성의 애니메이션만큼 효율적입니다.
translate, rotate, scale의 애니메이션은 transform의 애니메이션과 동일한 방식으로 컴포지터에서 실행되므로 transform와 동일한 방식으로 애니메이션 성능에 좋습니다.
이러한 새 속성은 will-change 속성에도 작동합니다. 일반적으로 필요한 최소 수의 요소를 대상으로 가능한 한 짧은 시간 동안 will-change를 과도하게 사용하지 않는 것이 좋습니다. 최대한 구체적으로 작성하는 것도 좋습니다. 예를 들어 will-change를 사용하여 rotate 및 filter 속성이 있는 애니메이션을 최적화하고 있다면 will-change: rotate, filter를 사용하여 이를 선언해야 합니다. 이는 rotate와 filter를 애니메이션 처리하는 경우에 will-change: transform, filter를 사용하는 것보다 약간 낫습니다. will-change를 사용할 때 Chrome에서 미리 만드는 일부 데이터 구조가 transform와 rotate에 서로 다르기 때문입니다.