Transform CSS – Transformacje

Z pewnością transform CSS to jedno z najbardziej ciekawych i dynamicznych narzędzi w arsenale projektanta stron internetowych. Mianowicie dzięki transformacjom możemy skalować, obracać, przesuwać i pochylać elementy, co otwiera przed nami ogromne możliwości w zakresie tworzenia dynamicznych i interaktywnych stron internetowych. Poniżej omówię podstawowe właściwości transformacji CSS i pokażę, jak stosować je w praktyce.

Do czego służy transform w CSS?

Przede wszystkim transformacje CSS to zestaw właściwości, które pozwalają na modyfikowanie wyglądu elementów bez zmiany ich pozycji w kodzie HTML. Dodatkowo dzięki nim możemy tworzyć efekty wizualne, które wcześniej były możliwe tylko przy użyciu zaawansowanych technik graficznych. Co więcej transform w CSS to zestaw właściwości, które umożliwiają modyfikowanie wyglądu elementów poprzez przekształcenia geometryczne. Ponad to transformacje mogą być 2D (dwuwymiarowe) lub 3D (trójwymiarowe), co pozwala na tworzenie bardziej zaawansowanych efektów.

Podstawowe właściwości transform CSS

Transform

Główna właściwość, która łączy wszystkie transformacje. Stosowana jest do określenia jednego lub więcej przekształceń w jednym elemencie.

transform: none | transform-function [transform-function] ...;

Translate – przesunięcie

Przesuwa element wzdłuż osi X i Y.

• translate(x, y) – przesunięcie w poziomie i pionie
• translateX(x) – przesunięcie w poziomie
• translateY(y) – przesunięcie w pionie
• translateZ(z) – przesunięcie w względem osi z – prostopadłej do 0X,0Y
• translate3d(x, y, z) – przesunięcie w trzech wymiarach

/* Przesunięcie wzdłuż osi X i Y */
element {
  transform: translate(x, y);
}

/* Przesunięcie wzdłuż osi X */
element {
  transform: translateX(x);
}

/* Przesunięcie wzdłuż osi Y */
element {
  transform: translateY(y);
}

/* Przesunięcie wzdłuż osi Z (dla efektu 3D) */
element {
  transform: translateZ(z);
}

/* Przesunięcie wzdłuż osi X, Y i Z */
element {
  transform: translate3d(x, y, z);
}

W poniższym przykładzie kwadrat żółty zostanie przesunięty o 160px w prawo i 50px w dół względem zielonego.

.box2 { transform: translate(160px,50px); }

Scale – zmiana rozmiarów

Skalowanie pozwala na zmianę rozmiaru elementów.

• scale(x, y) – zmiana szerokości i wysokości
• scaleX(x) – zmiana szerokości elementu
• scaleY(y) – zmiana wysokości elementu
• scaleZ(z) – zmiana szerokości i wysokości względem osi z – prostopadłej do 0X,0Y
• scale3d(x, y, z) – zmiana szerokości i wysokości w trzech wymiarach

/* Skalowanie wzdłuż osi X i Y */
element {
  transform: scale(x, y);
}

/* Skalowanie wzdłuż osi X */
element {
  transform: scaleX(x);
}

/* Skalowanie wzdłuż osi Y */
element {
  transform: scaleY(y);
}

/* Skalowanie wzdłuż osi Z (dla efektu 3D) */
element {
  transform: scaleZ(z);
}

/* Skalowanie wzdłuż osi X, Y i Z */
element {
  transform: scale3d(x, y, z);
}

W poniższym przykładzie kwadrat żółty zostanie zmniejszony względem zielonego.

.box2 { transform: scale(0.5,0.5); }

Rotate – obrót

Obrót pozwala na obracanie elementów wokół osi X, Y i Z.

• rotate(a) – obrót względem punktu 0 (centralny punkt elementu)
• rotateX(x) – obrót wokół osi X
• rotateY(y) – obrót wokół osi Y
• rotateZ(z) – obrót względem osi z – prostopadłej do 0X,0Y
• rotate3d(x,y,z) – obrót w trzech wymiarach

/* Obrót wokół punktu centralnego elementu */
element {
  transform: rotate(angle);
}

/* Obrót wokół osi X */
element {
  transform: rotateX(angle);
}

/* Obrót wokół osi Y */
element {
  transform: rotateY(angle);
}

/* Obrót wokół osi Z */
element {
  transform: rotateZ(angle);
}

/* Obrót wokół osi X, Y i Z */
element {
  transform: rotate3d(x, y, z, angle);
}

W poniższym przykładzie kwadrat żółty zostanie obrócony o 45 stopni w prawo względem zielonego.

.box2 { transform: rotate(45deg); }

Skew – pochylenie

Pochylenie pozwala na przechylanie elementów wzdłuż osi X i Y.

• skewX(x) – pochylenie wzdłuż osi X
• skewY(y) – pochylenie wzdłuż osi Y
• skew(x, y) – pochylenie wzdłuż osi X i Y

/* Pochylenie wzdłuż osi X */
element {
  transform: skewX(angle);
}

/* Pochylenie wzdłuż osi Y */
element {
  transform: skewY(angle);
}

/* Pochylenie wzdłuż osi X i Y */
element {
  transform: skew(x-angle, y-angle);
}

W poniższym przykładzie kwadrat żółty zostanie pochylony względem zielonego.

.box2 { transform: skew(-45deg,10deg); }

Perspective – perspektywa

Określa perspektywę dla elementu 3D.

selektor { transform: perspective(length); }

W poniższym przykładzie funkcję perspective połączymy z funkcją rotate.

.box2 { transform: perspective(150px) rotateY(-40deg); }

Matrix – połączenie parametrów

Łączy wszystkie przekształcenia w jednej funkcji.

selektor { transform: matrix(scalX, SkewY, SkewX, scalY, translateX, translateY); }

W naszym przykładzie będzie to wyglądać następująco:

.box2 { transform: matrix(0.20,0.5,-0.5,0.20,30,40); }

Praktyczne zastosowania transform CSS

Przesunięcie przy najechaniu myszką

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transformacja CSS - Przesunięcie</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      transition: transform 0.5s;
    }

    .box:hover {
      transform: translate(50px, 50px);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

Skalowanie przy najechaniu myszką

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transformacja CSS - Skalowanie</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: blue;
      transition: transform 0.5s;
    }

    .box:hover {
      transform: scale(1.5);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

Obrót przy najechaniu myszką

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transformacja CSS - Obrót</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: green;
      transition: transform 0.5s;
    }

    .box:hover {
      transform: rotate(45deg);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

Pochylenie przy najechaniu myszką

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transformacja CSS - Pochylenie</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: purple;
      transition: transform 0.5s;
    }

    .box:hover {
      transform: skew(20deg, 10deg);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

Transform CSS – podsumowanie

Z pewnością transformacje CSS to niezwykle przydatne narzędzie, które pozwala na tworzenie dynamicznych i interaktywnych efektów wizualnych. Co więcej dzięki właściwościom takim jak translate, scale, rotate i skew możemy przesuwać, skalować, obracać i pochylać elementy, co otwiera przed nami ogromne możliwości w zakresie projektowania stron internetowych. Pamiętaj, że aby osiągnąć płynne efekty, warto używać właściwości transition, która pozwala na animowanie transformacji.

Praktyka i eksperymentowanie z różnymi wartościami transformacji pomogą Ci lepiej zrozumieć, jak działają te właściwości i jak możesz je wykorzystać w swoich projektach. Powodzenia!