Przekształcanie elementów za pomocą właściwości translate, rotate i scale
Właściwość CSS transform
Aby zastosować przekształcenia do elementu, użyj właściwości transform CSS. Usługa akceptuje 1 lub więcej elementów <transform-function>, które są stosowane jeden po drugim.
.target {
transform: translateX(50%) rotate(30deg) scale(1.2);
}
Docelowy element jest przesuwany na osi X o 50%, obrócony o 30 stopni, a na koniec skalowany w górę do 120%.
Właściwość transform działa prawidłowo, ale zmiana którejkolwiek z tych wartości pojedynczo staje się dość uciążliwa.
Aby zmienić skalę po najechaniu kursorem, musisz zduplikować wszystkie funkcje we właściwości przekształcenia, 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 przekształcania
Dostawa w Chrome 104 to poszczególne właściwości przekształceń CSS. Właściwości to scale, rotate i translate, których możesz używać do definiowania tych części przekształcenia.
Chrome dołącza do przeglądarek Firefox i Safari, które już obsługują te właściwości.
Po zastąpieniu poprzedniego przykładu elementu transform poszczególnymi właściwościami fragment kodu będzie wyglądać tak:
.target {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}
Kwestie dotyczące zamówienia
Jedną z głównych różnic między pierwotną właściwością CSS transform a nowymi usługami jest kolejność, w jakiej są stosowane zadeklarowane przekształcenia.
W przypadku funkcji transform funkcje przekształcania są stosowane w takiej kolejności, w jakiej zostały zapisane – od lewej (na zewnątrz) do prawej (wewnątrz).
W przypadku poszczególnych właściwości przekształcenia kolejność nie jest kolejnością, w której zostały one zadeklarowane. Kolejność jest zawsze taka sama: najpierw translate (na zewnątrz), potem rotate, a później scale (wewnątrz).
Oznacza to, że oba te fragmenty kodu dają taki 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 przeniesione przez element 50% do osi X, a potem obrócone o 30deg, a na koniec powiększone o 1.2.
Jeśli zadeklarowana jest jedna z poszczególnych właściwości przekształcenia wraz z właściwością transform, poszczególne przekształcenia są stosowane jako pierwsze (translate, rotate, a potem scale), a transform na końcu (wewnątrz). Więcej szczegółów znajdziesz w specyfikacji, która określa sposób obliczania macierzy przekształcenia.
Animacje
Głównym powodem wprowadzenia tych właściwości jest ułatwienie animacji. Załóżmy, że chcesz animować element w ten sposób:
Jak korzystać z aplikacji transform
Aby zaimplementować tę animację przy użyciu funkcji transform, trzeba będzie obliczyć wszystkie wartości pomiędzy wszystkimi zdefiniowanymi przekształceniami i uwzględnić je w każdej klatce kluczowej. Aby np. wykonać rotację przy znaku 10%, oblicz też wartości dla pozostałych przekształceń, ponieważ właściwość transform potrzebuje ich wszystkich.
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 poszczególnych właściwości przekształcania
Dzięki indywidualnym właściwościom przekształcania znacznie łatwiej jest to pisać. Zamiast przeciągać wszystkie przekształcenia z klatki kluczowej do klatki kluczowej, możesz skonfigurować kierowanie na każdą z nich z osobna. Nie trzeba też obliczać wszystkich tych wartości w części między wartościami.
@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łcania i kilku klatek kluczowych
Jeśli chcesz, aby Twój kod był modułowy, możesz podzielić każdą animację podrzędną na oddzielny 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 możesz w dowolny sposób zastosować każdy osobny zestaw klatek kluczowych, ponieważ właściwości transform, które stały się osobnymi właściwościami, nie zastępują się nawzajem. Powyżej każdej przekształcenia możesz nadać inny czas trwania bez konieczności pisania wszystkiego od nowa.
Występy
Animacje korzystające z tych nowych właściwości są równie skuteczne jak animacje dotychczasowej właściwości transform.
Animacje elementów translate, rotate i scale są uruchamiane w kompozytorze w taki sam sposób jak animacje transform, więc są dobre dla ich działania w taki sam sposób jak w przypadku elementu transform.
Te nowe usługi są też zgodne z usługą will-change. Ogólnie nie zaleca się nadużywania atrybutu will-change przez używanie go do minimalnej liczby potrzebnych elementów i przez jak najkrótszy czas. Dobrze jest jednak podać jak najbardziej szczegółowe informacje. Jeśli np. używasz will-change do optymalizacji animacji przy użyciu właściwości rotate i filter, zadeklaruj to za pomocą will-change: rotate, filter. W przypadku animowania rotate i filter to rozwiązanie jest trochę lepsze niż użycie will-change: transform, filter, ponieważ niektóre struktury danych tworzone przez Chrome z wyprzedzeniem, gdy używasz will-change, różnią się w przypadku tych reguł: transform i rotate.