Transformacje CSS

Funkcja translate() w CSS jest częścią rodziny transformacji i umożliwia przesunięcie elementu wzdłuż osi X (poziomej) i/lub Y (pionowej) bez wpływu na inne elementy. Jest to jedna z najbardziej przydatnych funkcji do dokładnego pozycjonowania elementów.

1. Jak używać translate w CSS?

Funkcję translate() wpisujesz we właściwości transform; nowsze przeglądarki mają też osobną właściwość translate, np. translate: 50px 100px;. Na przykład:

div {
  transform: translate(50px, 100px);
}

W tym przypadku <div> zostanie przesunięty o 50 pikseli w prawo (wzdłuż osi X) i o 100 pikseli w dół (wzdłuż osi Y - w CSS dodatnie wartości na tej osi przesuwają element w dół).

2. Przesunięcie wzdłuż jednej osi

Możesz także przesunąć element tylko wzdłuż jednej osi, używając translateX lub translateY. Przykłady:

/* Przesunięcie tylko wzdłuż osi X */
div {
  transform: translateX(50px);
}

/* Przesunięcie tylko wzdłuż osi Y */
div {
  transform: translateY(100px);
}

3. Procenty jako jednostki

Funkcja translate może również przyjmować procenty jako jednostki, co pozwala na przesunięcie elementu względem jego własnej szerokości lub wysokości. Na przykład:

div {
  transform: translate(10%, 20%);
}

Tutaj element zostanie przesunięty o 10% swojej szerokości i 20% swojej wysokości.

4. Łączenie z innymi transformacjami

translate można łączyć z innymi transformacjami, takimi jak rotate, scale i skew, aby osiągnąć złożone efekty. Na przykład:

div {
  transform: translate(50px, 100px) rotate(30deg) scale(1.2);
}

Kolejność funkcji ma znaczenie: zamiana miejscami translate i rotate da inny efekt.

5. Inne transformacje

Translate to tylko jedna z wielu transformacji, które można stosować do elementów HTML. Inne transformacje to:

scale(sx, sy): Skaluje element, gdzie sx to skala wzdłuż osi X, a sy wzdłuż osi Y. Jeśli podana jest tylko jedna wartość, obie osie są skalowane jednakowo.

scaleX(sx): Skaluje element wyłącznie wzdłuż osi X.

scaleY(sy): Skaluje element wyłącznie wzdłuż osi Y.

rotate(angle): Obraca element o określony kąt, podany w stopniach (deg), radianach (rad), gradach (grad) lub obrotach (turn).

skew(x-angle, y-angle): Pochyla element o określone kąty wzdłuż osi X i Y. Jeśli podany jest tylko jeden kąt, drugi kąt jest domyślnie ustawiony na 0.

skewX(angle): Pochyla element tylko wzdłuż osi X.

skewY(angle): Pochyla element tylko wzdłuż osi Y.

matrix(a, b, c, d, e, f): Pozwala na zastosowanie transformacji za pomocą macierzy transformacji 2D. Jest to bardziej zaawansowana technika, która umożliwia kombinację wielu transformacji w jednym wyrażeniu.

matrix3d(...): Analogicznie do matrix, ale dla transformacji 3D. Umożliwia zastosowanie macierzy transformacji 3D, co jest jeszcze bardziej zaawansowaną techniką.

rotateX(angle): Obraca element wokół osi X w przestrzeni 3D.

rotateY(angle): Obraca element wokół osi Y w przestrzeni 3D.

rotateZ(angle): Obraca element wokół osi Z w przestrzeni 3D.

scale3d(sx, sy, sz): Skaluje element w przestrzeni 3D.

translate3d(x, y, z): Przesuwa element w przestrzeni 3D.

perspective(n): Stosuje perspektywę do elementu 3D. Jest często używana w połączeniu z transformacjami 3D, aby osiągnąć efekt głębi.

Ćwiczenie: Transformacje CSS

W tym ćwiczeniu nauczysz się, jak używać różnych transformacji CSS, aby przesuwać, obracać, skalować i pochylać elementy na stronie. Twoim zadaniem będzie utworzenie strony internetowej z różnymi elementami, które będą stylizowane za pomocą transformacji CSS.

Krok 1: Stwórz podstawową strukturę dokumentu HTML

Najpierw stwórz nowy plik HTML i dodaj podstawową strukturę dokumentu HTML. Dodaj elementy <div> z klasami dla różnych transformacji w ciele dokumentu (<body>).

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"> <!-- Podłącz plik CSS -->
  <title>Transformacje CSS</title>
</head>
<body>
  <h1>Transformacje CSS</h1>
  <div class="box translate">Translate</div>
  <div class="box translate-x">TranslateX</div>
  <div class="box translate-y">TranslateY</div>
  <div class="box rotate">Rotate</div>
  <div class="box scale">Scale</div>
  <div class="box skew">Skew</div>
</body>
</html>

Krok 2: Stwórz plik CSS

Otwórz lub utwórz nowy plik CSS i zapisz go jako styles.css.

Krok 3: Stylizacja podstawowa

Dodaj podstawowe style dla elementów <div>, aby były widoczne na stronie.

body {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  margin: 20px;
}

Krok 4: Transformacja translate

Dodaj styl dla klasy .translate, aby przesunąć element wzdłuż obu osi.

/* Transformacja translate */
.translate {
  transform: translate(50px, 100px);
}

Krok 5: Transformacja translateX

Dodaj styl dla klasy .translate-x, aby przesunąć element tylko wzdłuż osi X.

/* Transformacja translateX */
.translate-x {
  transform: translateX(50px);
}

Krok 6: Transformacja translateY

Dodaj styl dla klasy .translate-y, aby przesunąć element tylko wzdłuż osi Y.

/* Transformacja translateY */
.translate-y {
  transform: translateY(50px);
}

Krok 7: Transformacja rotate

Dodaj styl dla klasy .rotate, aby obrócić element.

/* Transformacja rotate */
.rotate {
  transform: rotate(45deg);
}

Krok 8: Transformacja scale

Dodaj styl dla klasy .scale, aby skalować element.

/* Transformacja scale */
.scale {
  transform: scale(1.5);
}

Krok 9: Transformacja skew

Dodaj styl dla klasy .skew, aby pochylić element.

/* Transformacja skew */
.skew {
  transform: skew(20deg, 10deg);
}

Wynik

Po wykonaniu wszystkich kroków twój plik HTML i CSS powinny wyglądać następująco:

Plik HTML (index.html)

Cała strona z kroku 1, bez zmian:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"> <!-- Podłącz plik CSS -->
  <title>Transformacje CSS</title>
</head>
<body>
  <h1>Transformacje CSS</h1>
  <div class="box translate">Translate</div>
  <div class="box translate-x">TranslateX</div>
  <div class="box translate-y">TranslateY</div>
  <div class="box rotate">Rotate</div>
  <div class="box scale">Scale</div>
  <div class="box skew">Skew</div>
</body>
</html>

Plik CSS (styles.css)

Wszystkie reguły z kroków 3-9 w jednym pliku:

body {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  margin: 20px;
}

/* Transformacja translate */
.translate {
  transform: translate(50px, 100px);
}

/* Transformacja translateX */
.translate-x {
  transform: translateX(50px);
}

/* Transformacja translateY */
.translate-y {
  transform: translateY(50px);
}

/* Transformacja rotate */
.rotate {
  transform: rotate(45deg);
}

/* Transformacja scale */
.scale {
  transform: scale(1.5);
}

/* Transformacja skew */
.skew {
  transform: skew(20deg, 10deg);
}

Eksperymentuj dalej

1. Dodaj więcej elementów z różnymi transformacjami, aby lepiej zrozumieć, jak działają różne transformacje.
2. Spróbuj dodać więcej stylów do swojej strony, np. zmieniając kolory, rozmiary i inne właściwości CSS.
3. Przetestuj swoje umiejętności, tworząc bardziej złożone efekty z użyciem różnych kombinacji transformacji.

Po wykonaniu tego ćwiczenia powinieneś lepiej rozumieć, jak używać różnych transformacji w CSS, aby przesuwać, obracać, skalować i pochylać elementy na stronie.