Logó{CSS3 Tutoriál}

Transzformációk és Átmenetek

Transzformáció 2D:

A transform tulajdonság segítségével transzformálhatjuk elemeinket.

Paraméterek és értékeik:

A tulajdonságnak szóközzel elválasztva több transzformációt is megadhatunk.

  • A rotate() érték elforgatja az elemet a képernyõ síkján, mégpedig a paraméterül kapott szöggel.
  • A rotateX() és a rotateY() értékek a paraméterül kapott szöggel forgatják el az elemet a képernyõ vízszintes, és függõleges tengelye körül.
  • A scale() érték a paraméterül kapott egy vagy (vesszõvel elválasztva) két számérték szorosára méretezi át az elemet. Az elsõ paraméter a vízszintes, az opcionális második a függõleges átméretezésért felel.
  • A scaleX()/scaleY() értékek a paraméterül kapott számérték szeresére méterezi át az elemet vízszintesen/függõlegesen.
  • A skew()érték a paraméterül kapott egy vagy (vesszõvel elválasztva) két szög mértékével ferdíti az elemet. Az elsõ paraméter a vízszintes, az opcionális második a függõleges ferdítésért felel.
  • A skewX()/skewY() értékek a paraméterül kapott szöggel ferdítik el az elemet vízszintesen/függõlegesen.
  • A translate() érték a paraméterül kapott egy vagy (vesszõvel elválasztva) két hosszúságérték mértékével tolja el az elemet. Az elsõ paraméter a vízszintes, az opcionális második a függõleges eltolásért felel. A pozitív értékek jobbra/le a negatív értékek balra/fel történõ eltolást eredményeznek.
  • A translateX()/translateY() értékek a paraméterül kapott hosszúságértékkel tolják el az elemet vízszintesen/függõlegesen.
  • A matrix() érték egy 3x3-as transzformációs mátrixot alkot, a paraméterül kapott(vesszõvel elválasztott) kilenc értékkel.

Tulajdonságok:

A transform tulajdonság értékei nem öröklõdnek.

A tulajdonság a CSS3 szabvány része. Jelenleg egyik böngészõ sem támogatja.


A transzformáció eredete:

A transzformációk eredetileg az elem középpontjától számolódnak, de ezt megváltoztathatjuk.

A transform-origin tulajdonság segítségével beállíthatjuk, hogy honnan számoljuk a transzformációt.

Paraméterek:

  • A tulajdonságnak megadhatunk egy vagy két (szóközzel elválasztott) paramétert.
  • Két paraméter esetén az elsõ a vízszintes, a második a függõleges elmozgatásért felel.
  • Egy paraméter esetén az a vízszintes elmozdításért felel, míg a függõleges paraméternek automatikusan a center érték helyettesítõdik be.
  • Pozitív értékek esetén az eredet balra-fel, negatív esetén jobbra le mozdul el.

Értékek:

  • Megadhatunk százalékos értékeket.
  • Megadhatunk hosszúság értékeket.
  • A left érték hatásra, a transzformáció az elem bal oldalától számítódik.
  • A top érték hatásra, a transzformáció az elem tetejétõl számítódik.
  • A right érték hatásra, a transzformáció az elem jobb oldalától számítódik.
  • A bottom érték hatásra, a transzformáció az elem aljától számítódik.
  • A center érték hatásra, a transzformáció az elem középpontjától számítódik.

Tulajdonságok:

A transform-origin tulajdonság értékei nem öröklõdnek.

A tulajdonság a CSS3 szabvány része. Jelenleg egyik böngészõ sem támogatja.

Példa:



Transzformáció 3D:

A transform tulajdonság segítségével 3D-s transzformációkat is végezhetünk elemeinken.

Paraméterek és értékeik:

A tulajdonságnak szóközzel elválasztva több féle transzformációt is megadhatunk.

  • A perspective() transzformációval megadhatjuk, hogy mennyire legyen 3D-s az elem nézete.
    • Az értéknek paraméterül adhatunk egy pozitív számértéket. Minél nagyobb értéket adhatunk meg, annál kevésbé lesz 3D-s a perspektíva.
  • A rotate3d() érték segítségével 3D-ben forgathatjuk el elemünket.
    • Elõször három vesszõvel elválasztott számértéket kell megadni paraméterül. Ezek az elforgatás tengelyét határozzák meg.
    • Végül adjuk meg az elforgatás mértékét, egy szöggel.
  • A rotateX(), rotateY(), rotateZ() értékek az X, Y, Z koordináta tengelyek körüli elforgatásért felelnek.
    • Az értékeknek egy szöget adhatunk paraméterül, ami az elforgatás nagyságát adják.
  • A scale3D() érték segítségével átméretezhetjük elemünket.
    • Az értéknek három vesszõvel elválasztott számértéket kell megadni paraméterül. Ezek az X, Y, Z koordináta mentén történõ átméretezés arányszámát adják meg. A negatív értékek tükrözést eredményeznek.
  • A scaleX(), scaleY(), scaleZ() értékek az X, Y, Z koordináta tengelyek körüli átméretezésért felelnek.
    • Az értéknek egy számértéket adunk paraméterül, ez az átméretezés arányszámát adja meg. A negatív értékek tükrözést eredményeznek.
  • A translate3d() érték az elemek 3D-s eltolásáért felel.
    • Az értéknek három vesszõvel elválasztott hosszúságértéket kell megadni paraméterül. Ezek az X, Y, Z koordináta mentén történõ eltolás mértékét adják meg. A pozitív értékek jobbra/le/ki a negatív értékek balra/fel/be történõ eltolást eredményeznek.
  • A translateX(), translateY(), translateZ() értékek az X, Y, Z koordináta tengelyek menti eltolásért felelnek.
    • Az értéknek egy hosszúságértéket adunk paraméterül, ami az eltolás mértékét határozza meg.
  • A matrix3d() érték egy 4x4-es transzformációs mátrixot alkot, a paraméterül kapott(vesszõvel elválasztott) tizenhat értékkel.

Tulajdonságok:

A transform tulajdonság értékei nem öröklõdnek.

A tulajdonság a CSS3 szabvány része. Jelenleg egyik böngészõ sem támogatja.


A transzformáció stílusa:

A transform-style tulajdonság segítségével meghatározhatjuk, hogy a transzformált elem gyermekei hogyan viselkedjenek a transzformáció során.

Értékek:

  • A flat érték hatására az elem összes gyermeke bekerül a transzformált elemünk 2D-s síkjába.
  • A preserve-3d érték megõrzi a gyermek elemek 3D-s perspektíváját.

Tulajdonságok:

A transform-style tulajdonság értékei nem öröklõdnek.

A tulajdonság a CSS3 szabvány része. Jelenleg egyik böngészõ sem támogatja.


A transzformáció perspektívája:

A perspective tulajdonság segítségével meghatározhatjuk a transzformált elem gyermekeinek perspektíváját.

Értékek:

  • Megadhatunk tetszõleges pozitív számértéket. Minél nagyobb értéket adhatunk meg, annál kevésbé lesz 3D-s a perspektíva.
  • A none érték hatása, megegyezik a 0 értékkel, azaz nem változik az eredeti perspektíva.

Tulajdonságok:

A perspective tulajdonság értékei nem öröklõdnek.

A tulajdonság a CSS3 szabvány része. Jelenleg egyik böngészõ sem támogatja.


A perspektíva eredet:

A perspective-origin tulajdonság segítségével megahatározhatjuk a perspective tulajdonság eredetét.

Paraméterek:

  • A tulajdonságnak egy vagy két (szóközzel elválasztott) paramétert adhatunk meg.
  • Két paraméter esetén az elsõ a vízszintes, a második a függõleges elmozgatásért felel.
  • Egy paraméter esetén az a vízszintes elmozdításért felel, míg a függõleges paraméternek automatikusan a center érték helyettesítõdik be.
  • Pozitív értékek esetén az eredet balra-fel, negatív esetén jobbra le mozdul el.

Értékek:

  • Megadhatunk százalékos értékeket.
  • Megadhatunk hosszúság értékeket.
  • A left érték hatásra, a perspektíva a gyermek elem bal oldalától számítódik.
  • A top érték hatásra, a perspektíva a gyermek elem tetejétõl számítódik.
  • A right érték hatásra, a perspektíva a gyermek elem jobb oldalától számítódik.
  • A bottom érték hatásra, a perspektíva a gyermek elem aljától számítódik.
  • A center érték hatásra, a perspektíva a gyermek elem középpontjától számítódik.

Tulajdonságok:

A perspective-origin tulajdonság értékei nem öröklõdnek.

A tulajdonság a CSS3 szabvány része. Jelenleg egyik böngészõ sem támogatja.


Az elem hátoldalának láthatósága:

A backface-visibility tulajdonság segítségével az elem hátoldalának láthatóságát állítjuk be.

Értékek:

  • A visible érték hatására, az elem hátoldala láthatóvá válik, ha egy transzformáció során az kerül elõtérbe.
  • A hidden érték esetén az elem hátoldala nem lesz látható.

Tulajdonságok:

A backface-visibility tulajdonság értékei nem öröklõdnek.

A tulajdonság a CSS3 szabvány része. Jelenleg egyik böngészõ sem támogatja.

Példa:



Átmenetek:

A transition tulajdonság segítségével idõben dinamikusan változtathatjuk meg elemeink stílusát azok állapotváltozásai között.

Paraméterek és értékeik:

  • Elõször adjuk meg azt a CSS tulajdonságot, amit az átmenet érint.
  • Majd opcionálisan megadhatjuk másodpercben, hogy mennyi idõt vegyen igénybe az átmenet. Ha nem adunk meg semmit, 0 másodperc az alapértelmezett érték.
  • Ezután adjuk meg az átmenet lefolyásának típusát. Ezek a következõk lehetnek:
    • A cubic-bezier() értéknek négy szám 0 és 1 közötti paramétert adva, Bezier-görbét határozhatunk meg. Ez határozza meg az állapotváltozás lefolyásának intenzitását.
    • A linear érték egyenletes állapotváltást eredményez.
    • A erase érték fokozatosan lassuló állapotváltást eredményez.
    • A erase-in érték gyorsuló állapotváltást eredményez.
    • A erase-out érték lassuló állapotváltást eredményez.
    • A erase-in-out érték gyorsuló, majd lassuló állapotváltást eredményez.
  • Majd opcionálisan megadhatjuk másodpercben, hogy mennyi késleltetéssel induljon az átmenet. Ha nem adunk meg semmit, 0 másodperc az alapértelmezett érték.
  • Az értékeket külön-külön is értékül adhatjuk a transition-property, transition-duration, transitiontiming-function és transition-delay funkcióknak.
  • Vesszõvel elválasztva több átmenetet is megadhatunk.

Tulajdonságok:

A transition tulajdonság értékei nem öröklõdnek.

A tulajdonság a CSS3 szabvány része. Jelenleg egyik böngészõ sem támogatja.

Példa:



Tárnok Tamás Attila - CSS3 Tutoriál - 2010