Kihagyás

6.3. fejezet

Transzformálás

A transform CSS tulajdonsággal 2-dimenziós, illetve 3-dimenziós transzformálásokat adhatunk HTML elemeknek. A transzformálás lehetőséget nyújt többek között elemek eltolására, forgatására, skálázására és elferdítésére.

A tulajdonság néhány fontosabb értéke:

  • translate(x, y): eltolja az elemet a jelenlegi helyéhez képest
    • x: vízszintes eltolás (pozitív érték esetén jobbra, negatív érték esetén balra tolja el)
    • y: függőleges eltolás (pozitív érték esetén lefelé, negatív érték esetén felfelé tolja el)
  • rotate(ndeg): elforgatja az elemet n fokkal (pozitív n esetén az óramutató járásával megegyező, negatív n esetén az óramutató járásával ellenkező irányba forgat)
  • scale(w, h): a megadott szélesség- (w) és magasság-aránynak (h) megfelelően nyújtja vagy zsugorítja az elemet
    • scaleX(n): n-szeresére nyújtja vagy zsugorítja az elem szélességét
    • scaleY(n): n-szeresére nyújtja vagy zsugorítja az elem magasságát
  • skew(xdeg, ydeg): elferdíti az elemet (az X-tengely mentén x fokkal, az Y-tengely mentén y fokkal)
    • skewX(ndeg): elferdíti az elemet az X-tengely mentén n fokkal
    • skewY(ndeg): elferdíti az elemet az Y-tengely mentén n fokkal
  • matrix(scaleX, skewY, skewX, scaleY, translateX, translateY): a fenti tulajdonságok összevont megadása
  • rotateX(ndeg): elforgatja az elemet az X-tengely körül n fokkal (3D transzformáció)
  • rotateY(ndeg): elforgatja az elemet az Y-tengely körül n fokkal (3D transzformáció)
  • rotateZ(ndeg): elforgatja az elemet a Z-tengely körül n fokkal (3D transzformáció).

Példa: Egy HTML elem vízszintes és függőleges középre igazítása a weboldalon belül

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Transzformálás</title>
    <meta charset="UTF-8"/>
    <style>
      html, body { height: 100%; }
      body { background: linear-gradient(180deg, cyan, magenta); font-family: sans-serif; }

      .centered {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);   /* eddig: függőlegesen középre igazítás */
        margin: 0 auto;                     /* elem vízszintesen középre igazítása */
        text-align: center;                 /* szöveges tartalom vízszintesen középre igazítása */
        background-color: rgba(0, 0, 0, 0.33);
        color: #fff;
        width: 50%;
      }
    </style>
  </head>
  <body>
    <div class="centered"><h1>Üdvözöllek!</h1></div>
  </body>
</html>

A kód kimenete

Példa: Egy HTML elem eltolása és 45 fokkal való elforgatása

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Transzformálás</title>
    <meta charset="UTF-8"/>
    <style>
      .rotated {
        transform: translate(80px, 50px) rotate(45deg);
        width: 120px; height: 120px; padding: 10px;
        background-color: #fefbaf;
      }
    </style>
  </head>
  <body>
    <div class="rotated">Valami elborult tartalmú cetli...</div>
  </body>
</html>

A kód kimenete

Utolsó frissítés: 2024-08-16 16:51:30