Átalakulás css, órák, webreference

előző ◈ a következő

Korábban láttuk, hogy a CSS lehetővé teszi számunkra, hogy a színt, set betűtípusokat, a változás szöveg, a pozíciót elemek, kérje a helyet, díszítjük és mozogni.

Átállás a CSS egy sor funkciót. amelyek lehetővé teszik egy bizonyos módon, hogy csatolja az elem alakja:

  • lefordítani. elem mozog három tengely mentén (x, y, z);
  • forgatni. tag körül forog egy központi pont;
  • skála. megváltoztatja a méretét elem;
  • Ferde. torzító elem.

átalakítás tulajdonságai

Három ingatlan rendelkezésre átalakulás:

  • transzformálására Meghatározza, melyik funkciót kell alkalmazni (lefordítani forgatás skála, stb ....);
  • transzformációs eredetű lehetővé teszi, hogy módosítsa a kiindulási pont a transzformáció (működik, mint egy background-position);
  • transzformációs stílust a 3D beállításokat.

Felhívjuk figyelmét, hogy ellentétben a háttér és a határon. átalakítás tulajdonság nem rövidítés.

Itt csak akkor tudunk használni a transzformáció.

Ne szakítsa meg az áramlás

Hogy megakadályozza a váratlan viselkedés alakítható elemek nem befolyásolják az áramlást. Függetlenül attól, hogy a forgatás, skálázás vagy mozgó, akkor nem érinti a többi elemet.

lefordítani () funkció lehetővé teszi, hogy mozog egy elemet a síkban (az x és y tengely). Tart vagy:

  • Az egyik paraméter: a tag mozog az X tengely mentén;
  • két paraméter: az első érték az x-tengely, a második az y-tengelyen.

Ez hasonló ahhoz, relatív helymeghatározás segítségével bal és felső értékeket.

Nézzük újra zárt animáció segítségével lefordítani. helyett helymeghatározás bal / fel:

Ne feledje: Át kell alakítani - ez style tulajdonság. lefordítani () - ezt az értéket (és egyúttal funkció), alkalmazható az ingatlan.

Használhatja translateX () és translateY (). elmozduljon csak az x és y tengely, ill.

forgatni () fogad csak egy paramétert, amely a szög értékét és meghatározzuk fokban (°), grádmérték (grad), radiánban (rad), vagy fordulattal (turn) (egyenértékű egy fordulattal teljes kör).

skála () függvény segítségével változtatni a méretét az elem. Ez növelheti vagy csökkentheti az elem. A függvény vagy:

  • Az egyik paraméter: változás a méret azonos magasság és szélesség;
  • két paraméter: az első érték átméretezi a vízszintes elemek, a második függőleges.

A lehetséges értékek:

  • 1: Az elem megtartja eredeti mérete;
  • 2: az elem kétszeresére nő;
  • 0.5: az elem a felére csökken;
  • 0: többnyire elem eltűnik (mint a magassága és szélessége egyenlő nulla);
  • -1: A elem tükröződik.

Ami a fordítás (). függvény skála () vannak olyan változatai az x és y: scaleX () és scaleY (). változtatni a méretét vízszintesen és függőlegesen, ill.

ferdeség () funkció lehetővé teszi, hogy torzítják az elem. csúsztatva mentén vonalak.

Ez az átalakítás a funkció ritkán használják, mert annak hatása nagyon kiszámíthatatlan, és az eredmény nem feltétlenül vonzó. Mindazonáltal, lássuk, hogyan működik.

Mint a skála (). funkció ferdeség () elfogadja vagy:

  • Az egyik paraméter: vízszintesen torz tagja;
  • két paraméter: az első érték torzítja vízszintes elem, egy második függőlegesen.

Hogyan és forgatás (). ferdeség () funkció csak akkor fogadja szög értékei, mint például a fok (° C).

3D-funkciók

Láttuk, hogy az átalakulás funkciók működnek a gépen. mentén az x és y tengely.

  • Mi lefordítani a () két paramétert:
    • lefordítani (x)
    • lefordítani (x, y)
  • translateX () csak az x tengelyen
  • translateY () csak az Y tengely

De mindezen funkciókat is van egy 3D-változat.

Például lefordítani () van egy változata translate3d (). amely ellátja az átalakítás három dimenzióban. ami azt jelenti, hogy magában foglalja a Z-tengellyel (ezen kívül van egy külön funkció translateZ).

A Z paraméter alapvetően teszi, hogy az elemet egymáshoz közelednek, és attól függően, hogy a csökkenést illetve az érték növelése. Ez olyan, mint a nagyítás és kicsinyítés.

Zöld tömb emelkedik 200px «fel» a z tengely mentén, mintha egyre közelebb hozzánk.

Ahhoz, hogy a szülő elem az alkalmazni kívánt perspektíva: 500px. a háromdimenziós térben vált észrevehető. Alternatív módon, ez is használható transzformálására: perspektivikus (500px).

előző ◈ a következő