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 zawierać 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ą niezmienione.

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

Poszczególne właściwości transformacji

W Chrome 104 są to pojedyncze właściwości transformacji CSS. Są to właściwości scale, rotate i translate, które możesz stosować 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.

Po przekształceniu poprzedniego przykładu transform z użyciem poszczególnych właściwości fragment kodu wygląda tak:

.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:

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.

Wynikowy kod CSS będzie 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 osobnych właściwości przekształcenia i kilku klatek kluczowych

Aby kod był modułowy, możesz podzielić każdą podanimację na własny 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 stosować każdy z osobnych zestawów klawiszy migawek według własnego uznania, ponieważ właściwości transform, które stały się teraz osobnymi właściwościami, nie zastępują już siebie nawzajem. Możesz też określić dla każdej przemiany inny czas, bez konieczności przepisywania całego kodu.

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ą tak samo wydajne.transform

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 na przykład używasz funkcji will-change do optymalizowania animacji za pomocą właściwości rotate i filter, musisz zadeklarować to za pomocą funkcji will-change: rotate, filter. Jest to nieco lepsze niż używanie 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 nowej serii interoperacyjnych dokumentów