CodeGym/Kursy/Frontend SELF PL/Kombinowane transformacje

Kombinowane transformacje

Dostępny

3.1 Podstawy kombinowanych transformacji

CSS daje możliwość łączenia kilku transformacji do tworzenia skomplikowanych efektów wizualnych. Te transformacje mogą zawierać translate, rotate, scale i skew, które można połączyć w jednym atrybucie transform.

Atrybut transform może zawierać kilka funkcji transformacji oddzielonych spacjami. Będą one stosowane kolejno, w podanej kolejności. Zrozumienie, jak różne transformacje oddziałują ze sobą, jest kluczem do tworzenia skomplikowanych animacji i efektów.

Składnia:

element {
  transform: function1() function2() ... functionN();
}

Przykład:

CSS
element {
  transform: translate(20px, 20px) rotate(45deg) scale(1.5) skew(10deg, 5deg);
}

Przesuwanie i obrót

W tym przykładzie element przesuwa się o 50 pikseli w prawo i w dół, a następnie obraca o 45 stopni.

Przykład:

HTML
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przesuwanie i obrót</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        transform: translate(50px, 50px) rotate(45deg);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

Wyjaśnienie kodu:

  • .box: element najpierw przesuwa się o 50 pikseli w prawo i w dół, a następnie obraca o 45 stopni zgodnie z ruchem wskazówek zegara

3.2 Analiza różnych kombinacji

1. Skalowanie i pochylanie

W tym przykładzie element jest skalowany 1.5 razy wzdłuż obu osi, a następnie pochylany o 20 stopni w osi X i 10 stopni w osi Y.

Przykład:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Skalowanie i pochylanie</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #e74c3c;
        transform: scale(1.5) skew(20deg, 10deg);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

Wyjaśnienie kodu:

  • .box: element najpierw skalowany jest 1.5 razy wzdłuż obu osi, a następnie pochylany o 20 stopni w osi X i 10 stopni w osi Y

2. Przesuwanie, obrót i skalowanie

W tym przykładzie element przesuwa się o 100 pikseli w prawo, obraca o 30 stopni i skalowany jest 2 razy w osi X i 1.5 razy w osi Y.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przesuwanie, obrót i skalowanie</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #2ecc71;
        transform: translate(100px, 0) rotate(30deg) scale(2, 1.5);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

Wyjaśnienie kodu:

  • .box: element najpierw przesuwa się o 100 pikseli w prawo, następnie obraca o 30 stopni i skalowany jest 2 razy w osi X i 1.5 razy w osi Y

3.3 Wpływ kolejności transformacji

Kiedy kilka transformacji jest łączonych, ważne jest zrozumienie, że są one stosowane w kolejności. Oznacza to, że każda kolejna transformacja wpływa na wynik poprzedniej.

W tym przykładzie pokazano, jak zmiana kolejności transformacji wpływa na ostateczny wynik.

Przykład A: najpierw obrót, potem przesunięcie

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Najpierw obrót, potem przesunięcie</title>
    <style>
      .box-a {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        transform: rotate(45deg) translate(50px, 50px);
      }
    </style>
  </head>
  <body>
    <div class="box-a"></div>
  </body>
</html>

Przykład B: najpierw przesunięcie, potem obrót

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Najpierw przesunięcie, potem obrót</title>
    <style>
      .box-b {
        width: 100px;
        height: 100px;
        background-color: #e74c3c;
        transform: translate(50px, 50px) rotate(45deg);
      }
    </style>
  </head>
  <body>
    <div class="box-b"></div>
  </body>
</html>

Wyjaśnienie kodu:

  • .box-a: element najpierw obraca się o 45 stopni, a następnie przesuwa o 50 pikseli w prawo i w dół, co sprawia, że przesuwa się po przekątnej z nowego położenia po obrocie
  • .box-b: element najpierw przesuwa się o 50 pikseli w prawo i w dół, a następnie obraca o 45 stopni, co sprawia, że obraca się względem nowego położenia
1
Zadanie
Frontend SELF PL,  poziom 23lekcja 2
Niedostępne
Pełna transformacja
Pełna transformacja
1
Zadanie
Frontend SELF PL,  poziom 23lekcja 2
Niedostępne
Kolejność transformacji
Kolejność transformacji
Komentarze
  • Popularne
  • Najnowsze
  • Najstarsze
Musisz się zalogować, aby dodać komentarz
Ta strona nie ma jeszcze żadnych komentarzy