A CSS3 2D átalakítása
A Átalakítási modul a CSS3-ban óriási kiegészítés, a webhelyen lévő elemeket a következő szintre manipuláljuk.
Vannak olyan kísérletek, amelyek igazán meglepnek, példák, mint ez. Azonban nem fogunk építeni olyan CSS-ikonra, amely valahogy Autobot-ra alakulhat át, mivel ez túlnyomó és nem igazán használható a való életben is.
Ehelyett ezúttal visszafelé haladunk, és áttekintjük a CSS3 2D átalakítások alapjait, hogy megtudjuk, hogyan működik egy alapvető szinten.
A szintaxis
A CSS3 Transformations modul alapvetően lehetővé teszi, hogy bizonyos mértékig átalakítsunk egy elemet, például fordítást, skálázást, forgatást és ferdén.
A hivatalos szintaxis transzformáció: módszer (érték). Azonban, mint bármely más CSS3 nagyszerű kiegészítés, amely még a korai szakaszban van, a jelenlegi böngészőknek még mindig szükségük van a szintaxis-változatra az átalakítások futtatásához. Tehát a teljes szintaxis így alakul ki:
transzformáció: módszer (érték); / * W3C Hivatalos szintaxis * / -o-transzformáció: módszer (érték); / * Opera 10.5+ * / -ms-transzformáció: módszer (érték); / * Internet Explorer 9.0+ * / -moz-transform: módszer (érték); / * Firefox 3.6+ * / -webkit-transform: módszer (érték); / * Chrome / Safari 3.2+ * /
Továbbá a fentiekben hivatkozott módszer a transzformációs függvények, amely a következők egyikével helyettesíthető: fordít(), skála(), forog() vagy ferde().
Az érték
A módszer nagy része megfelel a X-tengely és Y-tengely. Ha a középiskolában a Mathes osztályban lévő derékszögű koordinátarendszert emlékszik meg, az alapelv nagyon hasonló, az X-tengely a vízszintes és az Y-tengely a függőleges vonal.
A forgatás kivételével. A forgás fogja használni a poláris koordináták amely 0-tól 360-ig terjedő fokokban van kifejezve.
Az összes módszer értéke lehet negatív vagy pozitív. Csak vegye fel a megjegyzést, mivel a weblapot sorrendben, felülről lefelé olvassuk, ami az Y-tengelyt a weben az ellentétben állja a derékszögű koordináták eredeti elvével. Ez azt jelenti, hogy ha negatív értéket ad hozzá Y-tengely, ehelyett a tetejére kerül.
Az átalakítások használata
Most nézzük meg a következő alapvető demonstrációt, hogy lássuk az átalakítást az akcióban.
Fordítok
Ne essen felhőkkel a kifejezéssel fordít, nem fordít idegen nyelvet. A fordít itt valójában egy elem az elemek mozgatására.
A módszer két értéket tartalmaz; x és Y. a X érték ahogy fentebb rámutattunk, az elemet vízszintesen fogjuk elvenni; balra vagy jobbra, amíg a Y az érték függőlegesen veszi az alján vagy a tetején.
Most nézzük meg az alábbi egyszerű bemutatókat:
div szélesség: 100px; magasság: 100px; transzformálás: lefordítani (100px, 250px);
A fenti részlet a 100px-es elemet jobbra, a 250px-et pedig az aljára mozgatja.
div szélesség: 100px; magasság: 100px; transzformálás: lefordítani (100px, 0);
A fenti részletrészlet csak 100px-re mozgatja az elemet, mert nullázzuk az Y tengelyt. Akkor, ha az elemet balra akarjuk mozgatni, akkor az X tengelyt csak negatívnak kell állítanunk, az alábbiak szerint:
div szélesség: 100px; magasság: 100px; transzformálás: lefordítani (-100px, 0);
- "Fordítás" demó
Alternatív megoldásként az egyes módszerek segítségével az irányt egyetlen irányban mozgathatjuk; translateX () és translateY (), a különbség mindegyik módszer csak egy értéket fogad el.
Szóval, gyakorlatilag a átalakítás: lefordítani (-100px, 0) is egyenlő átalakítás: translateX (-100px).
II - Skála
A skála módszer lehetővé teszi számunkra nagyítani vagy csökkenteni az elemeket a tényleges méretétől. A skála értéke megegyezik a fordít A fenti módszerben X és Y is szerepel. Az egyetlen különbség az, hogy nem adjuk meg az egységet. Íme egy példa:
div szélesség: 100px; magasság: 100px; transzformáció: skála (1.5);
A fenti példa megnöveli a div 1,5 vagy 150% tényleges méretét, és mivel az X és Y irányokra egyaránt méretezzük, csak egy értékben kell nyilatkoznunk. Ezt így is deklarálhatja transzformáció: skála (1,5,1,5); ha részletesebben akarsz menni, akkor csak ugyanaz lesz.
Továbbá, ha csökkenteni szeretnénk az elemet, akkor kifejezetten 0,999-től 0-ig terjedő értéket használnánk, mint az alábbi példa, amely 50% -ra vagy félre csökkenti a div méretét:
div szélesség: 100px; magasság: 100px; transzformáció: skála (0,5);
De légy óvatos, ha az értéket abszolút értékre állítja “0” a div csak eltűnik, így ha nincs megalapozott oka erre, nem javaslom, hogy csináljam.
- "Scale" demó
III - Forgatás
Ahogy korábban említettük ezt a hozzászólást, a forog A módszer poláris koordinátákat használ, így az érték fokokban van megadva. Íme két példa
Az alábbi töredék elforgatja a div 30 fok jobbra.
div szélesség: 100px; magasság: 100px; transzformálás: forgatás (30deg);
A negatív érték, amint az alábbi példában látható, elfordul a div az ellenkező irányban (az óramutató járásával ellentétes irányban) ugyanolyan mértékben.
div szélesség: 100px; magasság: 100px; transzformálás: forgatás (-30deg);
- "Forgatás" demó
IV
A ferde módszer lehetővé teszi számunkra, hogy egyfajta párhuzamosságot hozzunk létre. Az X és Y tengely két értékét is tartalmazza. Ugyanakkor maga az érték fokozatban van megadva, az olyan lineáris mérések helyett, mint amilyeneket az skála vagy a fordít eljárás. Íme egy példa:
div szélesség: 200px; magasság: 100px; transzformáció: ferde (30deg, 10deg);
- "Skew" demó
V - Többszörös módszer
A átalakít a tulajdonságok nem korlátozódnak csak egy módszer kezelésére, sőt több módszert is tartalmazhat egyetlen deklarációban, így:
div szélesség: 100px; magasság: 100px; transzformálás: translateX (100px) forog (45deg);
A fenti részlet a 100px elemet jobbra mozgatja, és ugyanakkor 45 fokot is forog.
"Több módszer" demó.
Az eredet átalakítása
A transfrom származási - ahogy a neve is jelzi - az átalakítás kiindulási pontjának vezérlésére szolgál. Ha nem fejezzük ki kifejezetten ezt a tulajdonságot a következő szintaxissal transzformációs eredet: X Y;, akkor a böngésző az alapértelmezett értéket veszi fel, amely az X-re 50%, az Y pedig 50%.
Most, ha megadjuk a transzformációs származási 0-ra (X) 0 (Y) a transzformáció a bal felső részről indul.
Ismét minden böngészőnek szüksége van az előtag verziójára, hogy ezt a tulajdonságot hívhassa. Tehát itt van a teljes verzió, amely biztosítja, hogy a legtöbb böngészőben működik:
-webkit-transform-origin: X Y; -moz-transzformációs eredet: X Y; -o-transzformációs eredet: X Y; -ms-transzformáció: X Y; transzformációs eredet: X Y;
- "Transform-origin" demó
Következtetés
Mind a négy alapvető átalakítási módszert végeztük el; fordítson, méretezzen, forgasson és ferde
Azonban, mint már említettük, ez a modul még mindig korai szakaszban van, így ha ezeket a módszereket a következő webhelyen alkalmazza, győződjön meg róla, hogy az nem kompatibilis böngészők számára kíméletesen romlik (nem az IE6-ra hivatkozok).
Végül megtekintheti az összes demót, vagy letöltheti a forrást a következő linkekből.
- Demó
- Letöltés forrása
