transform
Przesuwa, obraca, skaluje lub pochyla element bez wpływu na układ strony.
- Wartość domyślna
none- Dziedziczona
- Nie
- Animowalna
- tak, jako transformacja
- Dotyczy
- elementy transformowalne (bez niezastępowanych elementów liniowych)
- JavaScript
element.style.transform = "rotate(10deg)"
Przykład
#.card {
transition: transform 0.2s;
}
.card:hover {
transform: translateY(-4px) scale(1.02);
}<div style="display: flex; gap: 12px; padding: 12px;">
<div class="box" style="transition: transform .2s;" onmouseenter="this.style.transform='translateY(-4px) scale(1.02)'" onmouseleave="this.style.transform=''">Najedź</div>
<div class="box" style="transition: transform .2s;" onmouseenter="this.style.transform='translateY(-4px) scale(1.02)'" onmouseleave="this.style.transform=''">Na mnie też</div>
</div>Definicja i zastosowanie
#Właściwość transform zmienia wygląd elementu za pomocą funkcji: translate() przesuwa, rotate() obraca, scale() skaluje, a skew() pochyla. Funkcje można łączyć, a wykonują się od prawej do lewej względem punktu transform-origin.
Transformacja nie wpływa na układ: element wizualnie się przesuwa lub rośnie, ale jego pierwotne miejsce zostaje zarezerwowane, a sąsiedzi nie drgną. Dlatego transformacje świetnie nadają się do animacji.
Przeglądarki animują transform bardzo wydajnie, zwykle na karcie graficznej. Przesuwanie elementu przez transform: translate() jest płynniejsze niż zmiana left czy margin.
Składnia
#transform: none | <funkcja transformacji>+;Wartości
#- Brak transformacji.
- Przesunięcie o 40px w prawo i 20px w górę.
- Obrót o 25 stopni zgodnie z ruchem wskazówek zegara.
- Powiększenie o 30%.
- Pochylenie w poziomie.
kilka funkcji
Obrót i powiększenie naraz.
Wartości w praktyce
#none
.demo { transform: none; }translate(40px, -20px)
.demo { transform: translate(40px, -20px); }rotate(25deg)
.demo { transform: rotate(25deg); }scale(1.3)
.demo { transform: scale(1.3); }skew(-15deg)
.demo { transform: skew(-15deg); }rotate(15deg) scale(1.2)
.demo { transform: rotate(15deg) scale(1.2); }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Do animacji ruchu używaj
transformzamiasttop,leftczymargin. Przeglądarka nie musi wtedy przeliczać układu. - Kolejność funkcji ma znaczenie:
rotate(45deg) translateX(50px)daje inny wynik niżtranslateX(50px) rotate(45deg).
Powiązane hasła
#- transform-originUstawia punkt, wokół którego element się obraca i względem którego się skaluje.
- translatePrzesuwa element w poziomie, pionie lub w głąb, niezależnie od właściwości transform.
- rotateObraca element o podany kąt, niezależnie od właściwości transform.
- scalePowiększa lub pomniejsza element, niezależnie od właściwości transform.
- transitionSkrót, który sprawia, że zmiany wartości CSS następują płynnie, a nie skokowo.
Widzisz błąd albo brakuje przykładu? Napisz do nas.