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

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).