Bardzo szybki CSS - 2D transforms

Istnieją 4 główne funkcje, które możemy przekazać do transform (translate, rotate, scale oraz skew) + ich odpowiedniki dla konkretnych osi X i Y (a nawet osi Z czyli z-index). Korzystanie z transform jest bardzo dobre pod względem wydajności animacji, zaś korzystanie z właściwości pokroju width, height i tym podobne jest całkowitą przeciwnością i czymś, czego warto unikać (plus może powodować nieoczekiwane zdarzenia).

Przypomnijmy sobie dwuwymiarowe transformacje. Na początek stworzymy 4 wycentrowane kwadraty w naszym pliku HTML:

<div class="squares">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
</div>

Teraz czyścimy style, używamy flexboxa na body (trzema mu ustawić wysokość na 100vh) do wycentrowania kontenera, centrujemy też flexboxem nasze kwadraty i tworzymy je:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    height: 100vh;
    background-color: rgb(58, 87, 112);
    display: flex;
    justify-content: center;
    align-items: center;
}

.squares {
    display: flex;
}

.square {
    width: 200px;
    height: 200px;
    background-color: tomato;
    margin-inline: 10px;
    transition: all .5s;
}

Nadaliśmy już transition na animowanym elemencie (na klasie square) a zatem możemy przechodzić do wypróbowania naszych animacji.

Na początek wypróbujemy translate, czyli przemieszczenie elementu (na osi X, Y lub obu) o jakąś wartość (dodatnią lub ujemną). Wykorzystamy nth-of-type, aby inaczej animować każdy kwadrat i zobaczyć różne konfiguracje:

.square:nth-of-type(1):hover {
 transform: translate(-50px, -50px);
 // 50px w lewo, 50px do góry
}

.square:nth-of-type(2):hover {
 transform: translate(50px, 50px);
 //50px w prawo, 50px w dół
}

.square:nth-of-type(3):hover {
  transform: translateX(50px);
//50px w prawo
}

.square:nth-of-type(4):hover {
 transform: translateY(-50px);
//50px do góry
}

Jednostek możemy oczywiście użyć dowolnych. Teraz pobawmy się za pomocą scale, czyli zmniejszania/zwiększania elementu:

.square:nth-of-type(1):hover {
transform: scale(0.5);
//dwa razy mniejszy
}

.square:nth-of-type(2):hover {
transform: scale(2);
//dwa razy większy
}

.square:nth-of-type(3):hover {
transform: scaleX(2);
//dwa razy szerszy
}

.square:nth-of-type(4):hover {
 transform: scaleY(2);
//dwa razy dłuższy
}

Teraz pora na rotate i skew:

.square:nth-of-type(1):hover {
transform: rotate(45deg);
//45 stopni zgodnie z kierunkiem zegara (w prawo)
}

.square:nth-of-type(2):hover {
transform: rotate(-45deg);
//45 stopni przeciwnie do kierunku zegara (w lewo)
}

.square:nth-of-type(3):hover {
transform: skew(30deg);
//"wygnij" 30 stopni w lewo
}

.square:nth-of-type(4):hover {
transform: skew(-30deg);
//wykrzyw 30 stopni w prawo
}

Szczególnie rotate okazuje się bardzo przydatne i warto to sobie opanować.

Wspomnę jeszcze o jednym – nigdy nie nadpisujmy wartości transform. Jeżeli chcemy mieć kilka transformacji, określamy je w jednej linijce, w jednym transform:

.square:nth-of-type(1):hover {
/* ŹLE */
transform: rotate(45deg);
transform: scale(2);
transform: translateY(-50px);
 /* TYLKO OSTATNIA ZADZIAŁA */
}
.square:nth-of-type(2):hover {
 /* DOBRZE */
 transform: rotate(45deg) scale(2) translateY(-50px);
 /* WSZYSTKIE ZADZIAŁAJĄ */
}

Bardzo szybki CSS – 2D transforms