Używamy cookies, żeby zwiększyć Twoje doświadczenia na stronie

Logowanie/Rejestracja->

Transformacje CSS

Właściwość 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 właściwości do dokładnego pozycjonowania elementów.

1. Jak używać translate w CSS?

Aby użyć translate, musisz zastosować właściwość transform do elementu, który chcesz przesunąć.

Przykład:

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

W tym przypadku <div> zostanie przesunięty o 50 pikseli w prawo (wzdłuż osi X) i o 100 pikseli w górę (wzdłuż osi Y).

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:

1/* Przesunięcie tylko wzdłuż osi X */
2div {
3  transform: translateX(50px);
4}
5
6/* Przesunięcie tylko wzdłuż osi Y */
7div {
8  transform: translateY(100px);
9}

3. Procenty jako Jednostki

Właściwość 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.

Przykład:

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

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

4. Działanie z Inne Transformacje

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

Przykład:

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

5. Inne transformacje

Translate to tylko jedna z wielu transformacji, które można stosować do elementów HTML. Inne, mniej używane 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>

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Podłącz plik CSS -->
7  <title>Transformacje CSS</title>
8</head>
9<body>
10  <h1>Transformacje CSS</h1>
11  <div class="box translate">Translate</div>
12  <div class="box translate-x">TranslateX</div>
13  <div class="box translate-y">TranslateY</div>
14  <div class="box rotate">Rotate</div>
15  <div class="box scale">Scale</div>
16  <div class="box skew">Skew</div>
17</body>
18</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.

1body {
2  display: flex;
3  flex-wrap: wrap;
4  gap: 20px;
5}
6
7.box {
8  width: 100px;
9  height: 100px;
10  background-color: lightblue;
11  display: flex;
12  align-items: center;
13  justify-content: center;
14  text-align: center;
15  font-size: 14px;
16  font-weight: bold;
17  margin: 20px;
18}

Krok 4: Transformacja translate

Dodaj styl dla klasy

.translate

, aby przesunąć element wzdłuż obu osi.

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

Krok 5: Transformacja translateX

Dodaj styl dla klasy

.translate-x

, aby przesunąć element tylko wzdłuż osi X.

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

Krok 6: Transformacja translateY

Dodaj styl dla klasy

.translate-y

, aby przesunąć element tylko wzdłuż osi Y.

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

Krok 7: Transformacja rotate

Dodaj styl dla klasy

.rotate

, aby obrócić element.

1/* Transformacja rotate */
2.rotate {
3  transform: rotate(45deg);
4}

Krok 8: Transformacja scale

Dodaj styl dla klasy

.scale

, aby skalować element.

1/* Transformacja scale */
2.scale {
3  transform: scale(1.5);
4}

Krok 9: Transformacja skew

Dodaj styl dla klasy

.skew

, aby pochylić element.

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

Wynik

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

Plik HTML (index.html)

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Podłącz plik CSS -->
7  <title>Transformacje CSS</title>
8</head>
9<body>
10  <h1>Transformacje CSS</h1>
11  <div class="box translate">Translate</div>
12  <div class="box translate-x">TranslateX</div>
13  <div class="box translate-y">TranslateY</div>
14  <div class="box rotate">Rotate</div>
15  <div class="box scale">Scale</div>
16  <div class="box skew">Skew</div>
17</body>
18</html>

Plik CSS (styles.css)

1body {
2  display: flex;
3  flex-wrap: wrap;
4  gap: 20px;
5}
6
7.box {
8  width: 100px;
9  height: 100px;
10  background-color: lightblue;
11  display: flex;
12  align-items: center;
13  justify-content: center;
14  text-align: center;
15  font-size: 14px;
16  font-weight: bold;
17  margin: 20px;
18}
19
20/* Transformacja translate */
21.translate {
22  transform: translate(50px, 100px);
23}
24
25/* Transformacja translateX */
26.translate-x {
27  transform: translateX(50px);
28}
29
30/* Transformacja translateY */
31.translate-y {
32  transform: translateY(50px);
33}
34
35/* Transformacja rotate */
36.rotate {
37  transform: rotate(45deg);
38}
39
40/* Transformacja scale */
41.scale {
42  transform: scale(1.5);
43}
44
45/* Transformacja skew */
46.skew {
47  transform: skew(20deg, 10deg);
48}

Eksperymentuj dalej

Dodaj więcej elementów z różnymi transformacjami, aby lepiej zrozumieć, jak działają różne transformacje.
Spróbuj dodać więcej stylów do swojej strony, np. zmieniając kolory, rozmiary i inne właściwości CSS.
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.

Przejdź do CodeWorlds→