Az átalakulások mátrixa

előző ◈ a következő

Számos webfejlesztő félreértés miatt nem használja a mátrixot a CSS átalakításokhoz, viszont a transzformáció legegyszerűbb funkcióit használja, míg az átalakítások mátrixának széles lehetőségei vannak. Kitaláljuk, hogyan kell használni a gyakorlatban.

A transzformációk mátrixa az elemek új koordinátáinak kiszámítására szolgál a későbbi átalakuláshoz. Ebben az esetben a feltétel teljesül: a vonalaknak mindig párhuzamosaknak kell lenniük, így a forgatás, a skálázás, a dőlés és a pozícióváltoztatás átalakításként megengedett, de nem perspektívából vagy valami hasonlóból. Az alábbi ábra egyaránt bemutatja a transzformációs mátrixok által létrehozott lehetséges és lehetetlen transzformációkat.

Tehát nem teheti meg

Maga a mátrix 3x3 nagyságú, és általában a következőképpen íródik:

Néha az egyszerűség kedvéért a harmadik oszlop kihagyásra kerül, mivel ez nem befolyásolja a végeredményt. Az elem minden egyes pontjának új koordinátáit a transzformáció után egy mátrix felhasználásával a következő képlet segítségével számítjuk ki:

Az egyes mátrix-együttható szerepét az alábbi táblázat mutatja be:

Módosítsa vízszintesen a skála méretét. Az 1-nél nagyobb érték kibővíti az elemet, kevesebb mint 1 tömörítést.

A vízszintes dőlés. A pozitív érték balra billent, negatív érték jobbra.

Dőlés a függőleges mentén. A pozitív érték kiegyenesedik, a negatív lefelé.

A skála függőleges módosítása. Az 1-nél nagyobb érték kibővíti az elemet, kevesebb mint 1 tömörítést.

Vízszintes eltolás pixelben. A pozitív érték az elemet jobbra mozgatja meghatározott számú képponttal, a negatív érték balra.

Függőleges eltolás pixelben. Ha az érték pozitív, az elem le van csökkentve egy meghatározott számú képponttal lefelé. Ha az érték negatív, menj fel.

Az egyértelműség érdekében ellenőrizheti az egyes együtthatók hatását ezen a formán:

Mátrix transzformációk a böngészőkben

Egy elem átalakításához a CSS stílusátalakítást használják. amely a kulcsszómátrix értékét veszi figyelembe. amelyben transzformációs mátrixunk együtthatóit soroljuk fel.

Ügyeljen az együtthatók sorrendjére, ez alapvető fontosságú!

A megszokott módon a CSS3 tulajdonságokkal rendelkező különböző böngészők saját módjuk szerint dolgoznak, és csak az előtagokkal értik meg őket, ezért többször is meg kell ismételni egy sort.

Ha a 9.0-es verzió előtt szüksége van az Internet Explorer támogatására, akkor a nem szabványos szűrő tulajdonságot is használnia kell.

Az azonosító mátrix

Ha az a és d együttható a mátrixban 1, és a mátrix többi eleme nulla, akkor egy ilyen mátrixot egységmátrixnak nevezünk. Ezt a mátrixot alapértelmezésben használják, mert ez nem vezet az elem átalakításához. Ezért, ha csak egyfajta átalakításra van szükséged, akkor alapul vigyél egy azonosító mátrixot.

skálázás

Az elem méretének növeléséhez, mondjuk kétszeresen vízszintesen, az a együtthatót 2 értékkel kell beállítani, és a fennmaradó együtthatókat úgy kell hagyni, mint az egységmátrixban.

Az új koordinátákat tekintjük:

x '= 2 * x + 0 * y + 0
y '= 0 * x + 1 * y + 0

Az elem vízszintes megjelenítéséhez állítsa a = -1 értéket. függőlegesen d = -1. vagy ezeket az értékeket egyidejűleg vízszintesen és függőlegesen visszaverődésre.

A lejtésnél a b és c együtthatók megfelelnek. amelyek befolyásolják az elem megjelenését. Állítsuk be a b = 1 értéket, és nézzük meg, milyen átalakítások keletkeznek.

x '= 1 * x + 0 * y + 0
y '= 1 * x + 1 * y + 0

Így csak az y koordináta változik. amely az x értékével növekszik. amely az elem lejtéséhez vezet. Az alábbi példában negatív érték van a b tényezőre, hogy az elemet jobbra billentjük.

A forgatás a skálázás és a dőlés kombinációja, de az átalakulás elemének eredeti arányának megőrzése érdekében szigorú számításokat kell követni a szinuszokkal és a koszinuszokkal.

A fordulás önmagában az óramutató járásával megegyező irányban történik, α határozza meg a forgási szöget fokokban.

elmozdulás

A tx tényező felelős az elem vízszintes elmozdulásáért. de függőlegesen. Az érték a képpontok száma, a Firefox, továbbá az egyetlen olyan böngésző, amely más egységeket támogat, például em.

Maga a lépés ritkán használatos, mert sok más eszköz található a CSS-ben, mint például a pozicionálás vagy behúzás.

Összefoglalva

Amint láthatja, a CSS átalakítások mátrixa meglehetősen egyszerű és hatékony transzformációs eszköz a CSS-ben. Természetesen nem mindig kell használni őket (pl. Kész fordítási funkció van a forgatáshoz). Mindazonáltal egyes esetekben, mint az elemek visszatükröződése, az átalakulás mátrixa egyszerűen pótolhatatlan.