Szczegółowa kontrola nad przekształceniami CSS z poszczególnymi właściwościami przekształcenia

Przekształcanie elementów za pomocą właściwości translate, rotate i scale

Bramus
L. David Baron

Właściwość CSS transform

Aby zastosować transformacje do elementu, użyj właściwości CSS transform. Właściwość może przyjmować co najmniej 1 wartość <transform-function>, która jest stosowana jedna po drugiej.

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

Docelowy element jest przesunięty o 50% na osi X, obrócony o 30 stopni i wreszcie powiększony do 120%.

Właściwość transform działa dobrze, ale staje się nieco uciążliwa, gdy chcesz zmienić dowolną z tych wartości indywidualnie.

Aby zmienić skalę po najechaniu kursorem, musisz powielić wszystkie funkcje w właściwości transformacji, nawet jeśli ich wartości pozostają bez zmian.

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

Poszczególne właściwości transformacji

Dostawa w Chrome 104 to indywidualne właściwości dotyczące przekształceń usługi porównywania cen. Są to właściwości scale, rotate i translate, których możesz używać do indywidualnego definiowania tych części przekształcenia.

Dzięki temu Chrome dołączy do przeglądarek Firefox i Safari, które już obsługują te usługi.

Obsługa przeglądarek

  • Chrome: 104.
  • Edge: 104.
  • Firefox: 72.
  • Safari: 14.1

Źródło

Po dodaniu do poprzedniego przykładu kodu transform fragment kodu zmieni się w taki sposób:

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

Zamówienia

Jedną z kluczowych różnic między pierwotną właściwością CSS transform a nowymi właściwościami jest kolejność, w jakiej zadeklarowane transformacje są stosowane.

W przypadku funkcji transform funkcje przekształcania są stosowane w kolejności, w jakiej zostały zapisane – od lewej (z zewnątrz) do prawej (do wewnątrz).

W przypadku poszczególnych właściwości przekształcenia kolejność nie jest taka sama jak kolejność ich deklarowania. Kolejność jest zawsze taka sama: najpierw translate (na zewnątrz), potem rotate, a potem scale (wewnętrzny).

Oznacza to, że oba te fragmenty kodu dają ten sam wynik:

.transform--individual {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.transform--individual-alt {
  rotate: 30deg;
  translate: 50% 0;
  scale: 1.2;
}

W obu przypadkach elementy docelowe zostaną najpierw przesunięte o 50% na osi X, a potem obrócone o 30deg, a na koniec powiększone o 1.2.

Jeśli jedna z osobnych właściwości transformacji jest zadeklarowana razem z właściwością transform, najpierw zostaną zastosowane poszczególne transformacje (translate, rotate, a potem scale), a na końcu transform (wewnątrz). Więcej informacji znajdziesz w specyfikacji, która określa sposób obliczania macierzy przekształcenia.

Animacje

Głównym powodem dodania tych właściwości było ułatwienie tworzenia animacji. Załóżmy, że chcesz animować element w ten sposób:

Wykres klatek kluczowych.

Jak korzystać z aplikacji transform

Aby zaimplementować tę animację za pomocą funkcji transform, musisz obliczyć wszystkie wartości pośrednie dla wszystkich zdefiniowanych przekształceń i uwzględnić je w każdowym klatce kluczowej. Na przykład, aby wykonać rotację na poziomie 10%, należy również obliczyć wartości dla innych przekształceń, ponieważ właściwość transform potrzebuje ich wszystkich.

Wykres klatek kluczowych z obliczonymi wartościami pośrednimi.

Powstały kod CSS wygląda tak:

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

Korzystanie z indywidualnych właściwości przekształcenia

Dzięki właściwościom transformacji indywidualnej łatwiej jest napisać kod. Zamiast przeciągać wszystkie przekształcenia z klatki kluczowej do klatki kluczowej, możesz ustawić je osobno. Nie musisz też już obliczać wszystkich wartości pośrednich.

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

Korzystanie z poszczególnych właściwości przekształcenia i kilku klatek kluczowych

Aby kod był modułowy, możesz podzielić każdą podanimację na osobny zestaw klatek kluczowych.

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

Dzięki temu podziałowi możesz zastosować każdy osobny zestaw klatek kluczowych w dowolnym momencie, ponieważ właściwości transform, które teraz stały się osobnymi właściwościami, nie zastępują się już. Powyżej możesz nadać każdej transformacji inny czas bez konieczności przerabiania całego procesu.

Wyniki

Animacje korzystające z tych nowych właściwości są tak samo wydajne jak animacje z dotychczasową właściwością transform.

Animacje translate, rotate i scale działają w kompozytorze tak samo jak animacje transform, więc są one równie wydajne.

Te nowe właściwości działają też z usługą will-change. Zasadniczo najlepiej unikać nadużywania will-change, stosując je w przypadku minimalnej liczby elementów i tak krótko, jak to możliwe. Warto jednak podać jak najwięcej szczegółów. Jeśli np. używasz will-change do optymalizacji animacji za pomocą właściwości rotate i filter, zadeklaruj to za pomocą will-change: rotate, filter. Jest to nieco lepsze niż użycie will-change: transform, filter w przypadku animowania rotate i filter, ponieważ niektóre struktury danych, które Chrome tworzy z wyprzedzeniem, gdy używasz will-change, różnią się w przypadku transform i rotate.

Należy do serii Nowe interoperacyjne wersje