Transformace

CSS transformace umožňují měnit pozici, rotaci, měřítko a zkosení (skew) elementů v 2D nebo 3D prostoru. Tyto efekty se hodí pro interaktivní prvky, animace a moderní designové prvky.

Všechny transformace se aplikují pomocí vlastnosti transform, která může mít jednu nebo více funkcí.

• translate() (Posun)

  Posune element z jeho původní pozice.

  • translateX(x): Posune element pouze horizontálně.
  • translateY(y): Posune element pouze vertikálně.
  • translate(x, y): Posune element horizontálně i vertikálně.

  .posunuty-box {
      transform: translateX(50px); /* Posune box o 50px doprava */
  }
  .tlacitko:hover {
      transform: translateY(-5px); /* Tlačítko se při najetí myší mírně zvedne */
  }

• rotate() (Otočení)

  Otočí element kolem své osy.

  • rotate(angle): Otočí element v 2D prostoru kolem středu elementu (v rovině Z). Úhel se udává ve stupních (deg), radiánech (rad) nebo otáčkách (turn).
  • rotateX(angle): Otočí element kolem horizontální osy (X).
  • rotateY(angle): Otočí element kolem vertikální osy (Y).
  • rotateZ(angle): Otočí element kolem osy hloubky (Z), stejné jako rotate().

  .spinner {
      transform: rotate(45deg); /* Otočí o 45 stupňů po směru hodinových ručiček */
  }
  .karta-efekt:hover {
      transform: rotateY(180deg); /* Otočení karty kolem vertikální osy */
  }

• scale() (Změna měřítka)

  Změní velikost elementu.

  • scaleX(factor): Změní měřítko horizontálně.
  • scaleY(factor): Změní měřítko vertikálně.
  • scale(factorX, factorY): Změní měřítko horizontálně i vertikálně. Pokud uvedete jen jednu hodnotu, aplikuje se na obě osy.

  .zvetsovatelny-obrazek:hover {
      transform: scale(1.1); /* Zvětší obrázek o 10% */
  }

• skew() (Zkosení)

  Zkosí (nakloní) element. Hodnoty jsou úhly.

  • skewX(angle): Zkosí element horizontálně.
  • skewY(angle): Zkosí element vertikálně.
  • skew(angleX, angleY): Zkosí element horizontálně i vertikálně.

  .nakloneny-text {
      transform: skewX(10deg); /* Nakloní text o 10 stupňů horizontálně */
  }

• matrix() (Pokročilé)

  Tato funkce kombinuje všechny 2D transformace do jedné, pomocí šesti číselných hodnot. Je to složitější a používá se spíše pro generování dynamických transformací.

transform-origin

Důležitou vlastností pro transformace je transform-origin, která definuje bod, kolem kterého se transformace aplikuje. Výchozí hodnota je center (střed elementu).

.rotace-z-rohu {
    transform-origin: top left; /* Otočí se kolem levého horního rohu */
    transform: rotate(45deg);
}