• Post last modified:11/07/2021
  • Reading time:3 mins read
  • Post comments:0 Komentarzy

Właściwość transform jest kluczowym elementem podczas tworzenia animacji za pomocą CSS. Zagadnienie to jest jednym z tematów omawianych na moim nowym kursie – Tworzenie stron internetowych. Zostało ono wybrane jako przykładowa lekcja, którą możemy obejrzeć przed podjęciem decyzji o zakupie. Temat ten postanowiłem również umieścić na blogu, ponieważ co prawda nie jest on jakoś duży, ale dotyczy bardzo przydatnej właściwości: CSS Transform.

Animacja w głównej mierze polega na poruszaniu, przemieszczaniu, obracaniu oraz zmianie wielkości. Wszystkie te rzeczy możemy wykonać za pomocą jednej właściwości CSS – transform. Spójrzmy na najbardziej przydatne wartości, jakich możemy w tym przypadku użyć:

  • translate(X, Y) – przesuwanie elementów góra/dół, np. translate(10px, 2px)
  • rotate(kąt) – obracanie elementów o określony kąt, np. rotate(20deg),
  • scale(skala) – powiększanie/pomniejszanie elementów, np. scale(2).

Położenie każdego z elementów na stronie możemy zmieniać w trzech płaszczyznach, czyli względem osi X, Y oraz Z. Z tego powodu każda z powyżej wymienionych wartości występuje jeszcze w wersjach z nazwą osi na końcu nazwy. Przykładowo wartość rotateY oznacza obrót wokół osi Y, scaleX oznacza powiększenie/zmniejszenie tylko względem osi X. Wszystkie te przypadki zaprezentowane zostaną na przykładzie.

Wspomniane powyżej wartości właściwości CSS Transform możemy zobrazować w następujący sposób:

Grafika prezentująca układ współrzędnych X Y Z

Przykład CSS Transform

Poniższy przykład zawiera kod CSS, dzięki któremu możemy manipulować testowym elementem na stronie za pomocą CSS Transform. Pod przykładem znajduje się dokładne wyjaśnienie tego tematu w formie materiału wideo.

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Animacje</title>
    <style>
      body {
        background-color: skyblue;
        font-family: sans-serif;
        text-align: center;
      }

      .shape {
        display: inline-block;
        border: 2px solid black;
        border-radius: 20px;
        background-color: aliceblue;
        width: 200px;
        height: 100px;
        margin-top: 100px;
      }
      
      .reference {
        position: absolute;
        opacity: 0.2;
        border-style: dashed;
      }

      .anim {
        /* Odkomentuj poszczególne linie i sprawdź jak zmieni się położenie
        testowego elementu */

        /* transform: translateX(200px); */
        /* transform: translateY(300px); */
        /* transform: translateZ(400px); */
        /* transform: translate(200px, 300px); */

        /* transform: scaleX(3); */
        /* transform: scaleY(2); */
        /* transform: scaleZ(2); */
        /* transform: scale(3, 2); */
        /* transform: scale(2); */

        /* transform: rotateX(40deg); */
        /* transform: rotateY(40deg); */
        /* transform: rotateZ(40deg); */
        /* transform-origin: top left; */
        /* transform: rotate(45deg); */
      }
    </style>
  </head>
  <body>
    <div>
      <div class="shape reference">
        <p>Element bazowy</p>
      </div>
      <div class="shape anim">
        <p>Element bazowy</p>
      </div>
    </div>
  </body>
</html>

Kamil Józwik

Frontend developer👨‍💻 Autor kursów na frontschool.pl, małego narzędzia dla programistów - frontbook.dev oraz kolejnych postów na tym blogu. Ulubiony stos technologiczny to React wraz z TypeScript oraz wszystko, co "nowe" w tym pięknym dynamicznym front end-owym świecie 🙂
Subscribe
Powiadom o
guest
0 Comments
Inline Feedbacks
View all comments