Generator transformacji
Wizualnie twórz i podglądaj właściwości transformacji CSS.
CSS Transform to potężna właściwość CSS, która pozwala przekształcać elementy internetowe w przestrzeni 2D lub 3D. Poprzez transformacje, takie jak translate, rotate, scale i skew, możesz tworzyć dynamiczne i interaktywne projekty internetowe. Łatwo twórz pożądane efekty dzięki podglądowi w czasie rzeczywistym.
transform: none;Funkcje transformacji
- • translate(x, y): translate(x, y): Przesuń element o x, y
- • scale(x, y): scale(x, y): Skaluj element o współczynnik x, y
- • rotate(angle): rotate(kąt): Obróć element o kąt
- • skew(x, y): skew(x, y): Pochyl element o x, y stopni
Wskazówki dotyczące użytkowania
- • Wiele funkcji transformacji można łączyć spacjami
- • Zmień punkt początkowy transformacji za pomocą transform-origin
- • Użyj z transition, aby stworzyć efekty animacji
- • Użyj właściwości perspective dla transformacji 3D
🎯 Podstawowe koncepcje transformacji
CSS Transform to właściwość CSS, która zmienia kształt, rozmiar i położenie elementów. Pozwala na wizualne przekształcanie elementów bez zakłócania normalnego przepływu dokumentu.
Podstawowa składnia:
transform: function(value) function(value) ...;📐 Szczegóły funkcji transformacji
🔄 Translate (Przesunięcie)
- •
translate(x, y): translate(x, y): Przesuń wzdłuż osi X, Y - •
translateX(x): translateX(x): Przesuń tylko wzdłuż osi X - •
translateY(y): translateY(y): Przesuń tylko wzdłuż osi Y - •
translate3d(x, y, z): translate3d(x, y, z): Ruch 3D
transform: translate(50px, 100px);📏 Scale (Skalowanie)
- •
scale(x, y): scale(x, y): Skaluj osie X, Y - •
scaleX(x): scaleX(x): Skaluj tylko oś X - •
scaleY(y): scaleY(y): Skaluj tylko oś Y - • Wartość większa niż 1 powiększa, mniejsza niż 1 zmniejsza
transform: scale(1.5, 0.8);🔄 Rotate (Obrót)
- •
rotate(angle): rotate(kąt): Obróć wokół osi Z - •
rotateX(angle): rotateX(kąt): Obróć wokół osi X - •
rotateY(angle): rotateY(kąt): Obróć wokół osi Y - • Użyj jednostek deg, rad, turn dla kątów
transform: rotate(45deg);📐 Skew (Pochylenie)
- •
skew(x, y): skew(x, y): Pochyl wzdłuż osi X, Y - •
skewX(angle): skewX(kąt): Pochyl wzdłuż osi X - •
skewY(angle): skewY(kąt): Pochyl wzdłuż osi Y - • Przekształć w kształt równoległoboku
transform: skew(15deg, 5deg);🎨 Transform Origin (Punkt transformacji)
Właściwość transform-origin ustawia punkt początkowy transformacji. Domyślnie jest to środek elementu (50% 50%).
Używanie słów kluczowych
transform-origin: top left;Używanie procentów
transform-origin: 25% 75%;Używanie pikseli
transform-origin: 10px 20px;⚡ Wskazówki dotyczące optymalizacji wydajności
✅ Zalecenia
- • Animuj tylko transform i opacity
- • Użyj właściwości will-change
- • Użyj akceleracji 3D (translateZ(0))
- • Twórz warstwy kompozytowe dla lepszej wydajności
❌ Czego unikać
- • Animowanie szerokości, wysokości
- • Animowanie pozycji left, top
- • Nadmierne zagnieżdżanie transformacji
- • Niepotrzebne użycie will-change
Przykład optymalizacji wydajności:
.optimized {
will-change: transform;
transform: translateZ(0); /* 3D 가속 */
transition: transform 0.3s ease;
}🎬 Animacja i przejścia
Transform może być używany z CSS Transition i Animation do tworzenia płynnych efektów.
Przykład przejścia
.hover-effect {
transition: transform 0.3s ease;
}
.hover-effect:hover {
transform: scale(1.1) rotate(5deg);
}Przykład animacji klatek kluczowych
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.bounce { animation: bounce 1s infinite; }🌐 Kompatybilność przeglądarek
CSS Transform jest obsługiwany we wszystkich nowoczesnych przeglądarkach, ale w starszych przeglądarkach mogą być potrzebne prefiksy dostawców.
Przykład prefiksu dostawcy:
-webkit-transform: rotate(45deg); /* Safari, Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-ms-transform: rotate(45deg); /* IE 9 */
transform: rotate(45deg); /* 표준 */🎯 Przykłady zastosowań w świecie rzeczywistym
Efekt najechania na kartę
.card {
transition: transform 0.3s ease;
cursor: pointer;
}
.card:hover {
transform: translateY(-10px) scale(1.02);
}Spinner ładowania
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 1s linear infinite;
}Efekt wejścia modalnego
.modal {
transform: scale(0) rotate(180deg);
transition: transform 0.3s ease;
}
.modal.show {
transform: scale(1) rotate(0deg);
}Efekt kliknięcia przycisku
.button {
transition: transform 0.1s ease;
}
.button:active {
transform: scale(0.95);
}🔧 Narzędzia do debugowania i rozwoju
Narzędzia deweloperskie przeglądarki
- • Edycja w czasie rzeczywistym w panelu Elementy
- • Sprawdź wartości końcowe w zakładce Obliczone
- • Analiza wydajności w zakładce Wydajność
- • Sprawdź strukturę warstw w widoku 3D
Przydatne właściwości CSS
- •
transform-style: preserve-3d - •
perspective: 1000px - •
backface-visibility: hidden - •
will-change: transform
💡 Profesjonalne wskazówki
Wskazówka dotycząca wydajności
Użycie transform3d() lub translateZ(0) do tworzenia warstw kompozytowych dla akceleracji GPU może znacząco poprawić wydajność animacji.
Wskazówka dotycząca dostępności
Użyj zapytania mediów prefers-reduced-motion, aby zapewnić alternatywy dla użytkowników wrażliwych na ruch.
Wskazówka dotycząca projektowania
Właściwe ustawienie transform-origin może stworzyć bardziej naturalne efekty transformacji.
Wskazówka dotycząca rozwoju
Użycie zmiennych CSS do dynamicznego sterowania wartościami transformacji ułatwia integrację JavaScript.