• 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