Átalakítani - CSS-trükkök

A transformtulajdonság lehetővé teszi az elemek vizuális manipulálását ferdítéssel, forgatással, fordítással vagy méretezéssel:

.element ( width: 20px; height: 20px; transform: scale(20); )

Még deklarált magassággal és szélességgel is ez az elem az eredeti méretének húszszorosára méretezhető:

Lásd a CSS-Tricks (@ css-tricks) Pen Transform magyarázatát a CodePen-en.

Ha ezt a funkciót két érték adja meg, az elsővel vízszintesen, a másodikkal függőlegesen megnyúlik. Az alábbi példában az elem most kétszer nagyobb lesz, mint az eredeti elem magasságának fele:

.element ( transform: scale(2, .5); )

Vagy konkrétabb lehet a gyorsírás funkció használata nélkül:

transform: scaleX(2); transform: scaleY(.5);

De scale()ez csak egy a sok rendelkezésre álló transzformációs funkció közül:

Értékek

• scale(): Befolyásolja az elem méretét. Ez vonatkozik az font-size, padding, heightés widthegy elem is. Ez aa scaleXés a scaleYfunkciók gyorsírási funkciója is .
• skewX()és skewY(): Egy elemet balra vagy jobbra dönt, mintha egy téglalapot paralelogrammává változtatna. skew()olyan gyorsírás, amely egyesíti skewX()és skewYelfogadja mindkét értéket.
• translate(): Egy elemet oldalra vagy fel-le mozgat.
• rotate(): Az elemet az aktuális helyzetéből az óramutató járásával megegyező irányba forgatja.
• matrix(): Olyan függvény, amelyet valószínűleg nem kézzel írtak, de az összes átalakítást egybe egyesíti.
• perspective(): Nem befolyásolja magát az elemet, de befolyásolja a leszármazott elemek 3D-s transzformációit, lehetővé téve számukra, hogy következetes mélységi perspektívájuk legyen.

Ferde

/* Skew points along the x-axis */ .element ( transform: skewX(25deg); ) /* Skew point along the y-axis */ .element ( transform: skewY(25deg); ) /* Skew points along the x- and y-axis */ .element ( transform: skew(25deg, 25deg); )

A skewXés a skewYtranszformáció függvények egy vagy több elemet döntenek. Ne feledje: nincs gyorsírási tulajdonság egy elem torzításához, ezért mindkét funkciót használnia kell. Az alábbi példában egy 100px x 100px négyzetet balra és jobbra ferdíthetünk skewX:

Lásd a CSS-Tricks (@ css-tricks) Pen Transform magyarázatát a CodePen-en.

Míg ebben a példában egy elemet függőlegesen torzíthatunk a következőkkel skewY:

Lásd a CSS-Tricks (@ css-tricks) Pen Transform magyarázatát a CodePen-en.

Most használjuk skew()a kettő kombinálására:

Tekintse meg a
CSS-Tricks (@ css-tricks) Pen skew () gyorsírás tulajdonságát
a CodePen-en.

Forog

.element ( transform: rotate(25deg); )

Ez egy elemet az óramutató járásával megegyező irányba forgat az eredeti helyzetétől, míg egy negatív érték az ellenkező irányba forgatja. Íme egy egyszerű animált példa, ahol a négyzet három másodpercenként 360 fokkal forog tovább:

Lásd a CSS-Tricks (@ css-tricks) Pen Transform magyarázatát a CodePen-en.

Használhatjuk a rotateX, rotateYés a rotateZfunkciókat is, például:

Lásd a CSS-Tricks (@ css-tricks) Pen Transform magyarázatát a CodePen-en.

fordít

.element ( transform: translate(20px, 10px); )

Ez a transzformációs függvény egy elemet oldalra, vagy fel-le mozgat. Miért nem csak a felső / bal / alsó / jobb oldali részt használja? Nos, ez néha kissé zavaros. Ezekre elrendezésként / pozicionálásként gondolnék (amúgy is jobb a böngészőtámogatásuk), és ez arra a módra, hogy ezeket a dolgokat átmenet vagy animáció részeként mozgathassuk.

Ezek az értékek bármilyen hosszúságú értékek lehetnek, például 10px vagy 2.4em. Egy érték az elemet jobbra (a negatív érték balra) mozgatja. Ha megad egy második értéket, akkor ez a második érték lefelé mozog (negatív értékek felfelé). Vagy megadhatja a következőket:

transform: translateX(value); transform: translateY(value);

Fontos megjegyezni, hogy egy elem használata transformnem okoz más elemek áramlását körülötte. Az translatealábbi függvény használatával és a zöld négyzet kibontásával az eredeti helyzetéből észrevehetjük, hogy a környező szöveg rögzítve marad-e a helyén, mintha a négyzet blokk elem lenne:

Lásd a CSS-Tricks (@ css-tricks) Pen Transform magyarázatát a CodePen-en.

Érdemes megjegyezni azt translateis, hogy a hardver gyorsul, ha animálni szeretné ezt a tulajdonságot, ellentétben position: absolute.

Több érték

Szóközzel elválasztott listával több értéket is hozzáadhat a transformtulajdonsághoz:

.element ( width: 20px; height: 20px; transform: scale(20) skew(-20deg); )

Érdemes megjegyezni, hogy van egy sorrend, amelyben ezeket az átalakításokat végrehajtják, a fenti példában először a „ferdeséget” hajtják végre, majd az elemet méretezik.

Mátrix

A matrixtranszformációs funkcióval az összes transzformációt egybe lehet egyesíteni. Kicsit olyan, mint a transzformációs gyorsírás, csak nem hiszem, hogy valóban kézzel írták volna. Vannak olyan eszközök, mint a The Matrix Resolutions, amelyek átalakíthatják a transzformációk egy csoportját egyetlen mátrix deklarációvá. Lehet, hogy bizonyos helyzetekben ez csökkentheti a fájlméretet, bár az ilyen szerző-barát barátságtalan mikrooptimalizálás valószínűleg nem éri meg az idejét.

A kíváncsiak számára ez:

rotate(45deg) translate(24px, 25px)

ábrázolható a következőképpen is:

matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824)

3D átalakítások

A fenti tulajdonságok többségének 3D-s verziói vannak.

translate3d(x, y, z) translateZ(z)

A harmadik translate3dvagy a benne lévő érték translateZaz elemet a néző felé mozgatja, a negatív értékek pedig távolabb kerülnek.

scale3d(sx, sy, sz) scaleZ(sz)

A harmadik érték scale3dvagy az in érték scaleZbefolyásolja a z tengely menti méretarányt (pl. A képzeletbeli egyenes a képernyőről).

rotateX(value) rotateY(value) rotate3d(x, y, z)

rotateXés rotateYelforgat egy elemet a 3D térben azok körül a tengelyek körül. rotate3dlehetővé teszi, hogy meghatározzon egy pontot a 3D térben, ahol az elemet elforgathatja.

matrix3d(… )

A 3D transzformáció programozott leírásának módja 4 × 4 rácsban. Ezek közül soha senki nem fog kézzel írni.

perspective(value)

Ez az érték nem befolyásolja magát az elemet, de befolyásolja a leszármazott elemek 3D-s transzformációit, lehetővé téve számukra, hogy mindannyian következetes mélységi perspektívát kapjanak.

Több információ

• MDN-dokumentumok az átalakításról és a használatról.
• David DeSandro dokumentációja a 3D transzformációkról
• Surfin 'Safari: 3D transzformációk
• A CSS3 transzformációk W3C specifikációja
• Bevezetés a CSS 3D átalakításokba

Böngésző támogatás

2D átalakítások

Króm	Szafari	Firefox	Opera	AZAZ	Android	iOS
Bármi	3.1+	3,5+	10,5+	9+	4.1+	Legalább 4

3D átalakítások

Króm	Szafari	Firefox	Opera	AZAZ	Android	iOS
10+	4+	12+	egyik sem	10+	4.1+	5+

Szállító előtagok

.element ( -webkit-transform: value; -moz-transform: value; -ms-transform: value; -o-transform: value; transform: value; )