Transformovať - Triky CSS

Anonim

Táto transformvlastnosť umožňuje vizuálne manipulovať s prvkom skosením, otočením, prekladom alebo zmenšením mierky:

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

Aj pri deklarovanej výške a šírke bude tento prvok teraz zmenšený na dvadsaťnásobok svojej pôvodnej veľkosti:

Prečítajte si vysvetlenie transformácie pera pomocou CSS-Tricks (@ css-tricks) na CodePen.

Ak dáte tejto funkcii dve hodnoty, roztiahne ju vodorovne o prvú a vertikálne o druhú. V príklade nižšie bude mať prvok teraz dvojnásobnú šírku, ale polovicu výšky pôvodného prvku:

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

Alebo môžete byť konkrétnejší bez použitia funkcie skratky:

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

Je scale()to však len jedna z mnohých transformačných funkcií, ktoré sú k dispozícii:

Hodnoty

  • scale(): Ovplyvňuje veľkosť prvku. To platí aj pre font-size, padding, heighta widthprvku, taky. Je to tiež funkcia skratky pre funkcie scaleXa scaleY.
  • skewX()a skewY(): Nakláňa prvok doľava alebo doprava, ako napríklad premena obdĺžnika na rovnobežník. skew()je skratka, ktorá kombinuje skewX()a skewYprijíma obe hodnoty.
  • translate(): Posúva prvok do strany alebo hore a dole.
  • rotate(): Otočí prvok v smere hodinových ručičiek z jeho aktuálnej polohy.
  • matrix(): Funkcia, ktorá pravdepodobne nie je určená na to, aby sa písala rukou, ale spája všetky transformácie do jednej.
  • perspective(): Neovplyvňuje samotný prvok, ale ovplyvňuje transformácie 3D transformácií zostupných prvkov, vďaka čomu majú všetci konzistentnú hĺbkovú perspektívu.

Šikmý

/* 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); )

Funkcie skewXa a skewYtransformácia nakláňajú prvok tak či onak. Pamätajte si: neexistuje skratková vlastnosť na zošikmenie prvku, takže budete musieť použiť obe funkcie. V príklade nižšie môžeme skosiť štvorec 100px x 100px doľava a doprava pomocou skewX:

Prečítajte si vysvetlenie transformácie pera pomocou CSS-Tricks (@ css-tricks) na CodePen.

Zatiaľ čo v tomto príklade môžeme prvok zvisle skosiť pomocou skewY:

Prečítajte si vysvetlenie transformácie pera pomocou CSS-Tricks (@ css-tricks) na CodePen.

Teraz poďme skew()kombinovať tieto dve možnosti:

Prezrite si
vlastnosť skratky Pen skew () od CSS-Tricks (@ css-tricks)
na CodePen.

Točiť sa

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

Toto otočí prvok v smere hodinových ručičiek z pôvodnej polohy, zatiaľ čo záporná hodnota by ho otočila v opačnom smere. Tu je jednoduchý animovaný príklad, keď sa štvorec naďalej otáča o 360 stupňov každé tri sekundy:

Prečítajte si vysvetlenie transformácie pera pomocou CSS-Tricks (@ css-tricks) na CodePen.

Môžeme tiež použiť rotateX, rotateYa rotateZfunkcií, ako tak:

Prečítajte si vysvetlenie transformácie pera pomocou CSS-Tricks (@ css-tricks) na CodePen.

Preložiť

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

Táto transformačná funkcia posúva prvok do strany alebo hore a dole. Prečo nepoužívať iba hornú / ľavú / spodnú / pravú stranu? No občas je to trochu mätúce. Považoval by som ich za rozloženie / umiestnenie (aj tak majú lepšiu podporu prehľadávača) a to je spôsob, ako tieto veci presunúť v rámci prechodu alebo animácie.

Tieto hodnoty by mali byť ľubovoľné hodnoty dĺžky, napríklad 10px alebo 2,4em. Jedna hodnota posunie prvok doprava (záporné hodnoty doľava). Ak je poskytnutá druhá hodnota, táto druhá hodnota ju posunie nadol (záporné hodnoty nahor). Alebo môžete získať konkrétne:

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

Je dôležité si uvedomiť, že použitie prvku transformnespôsobí, že okolo neho budú prúdiť ďalšie prvky. Použitím translatenižšie uvedenej funkcie a vytlačením zeleného štvorca z pôvodnej polohy si všimneme, ako okolitý text zostane zafixovaný na danom mieste, akoby bol štvorec blokovým prvkom:

Prečítajte si vysvetlenie transformácie pera pomocou CSS-Tricks (@ css-tricks) na CodePen.

Je tiež potrebné poznamenať, že translatena rozdiel od verzie bude hardvérovo akcelerovaná, ak chcete túto vlastnosť animovať position: absolute.

Viaceré hodnoty

Pomocou zoznamu oddelených medzerami môžete do transformvlastnosti pridať viac hodnôt :

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

Stojí za zmienku, že existuje poradie, v ktorom sa tieto transformácie uskutočnia, vo vyššie uvedenom príklade sa najskôr vykoná skew a potom sa zmenší veľkosť prvku.

Matrix

Funkciu matrixtransformácie je možné použiť na spojenie všetkých transformácií do jednej. Je to trochu ako transformačná skratka, len neverím, že je to skutočne určené na to, aby to bolo písané rukou. Existujú nástroje, ako napríklad The Matrix Resolutions, ktoré dokážu previesť skupinu transformácií do jednej maticovej deklarácie. Možno to v niektorých situáciách môže znížiť veľkosť súboru, aj keď autorské mikroskopické optimalizácie, ako sú tieto, vám pravdepodobne nebudú stáť za váš čas.

Pre zvedavcov toto:

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

môžu byť tiež reprezentované ako:

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

3D transformácie

Väčšina z vyššie uvedených vlastností má ich 3D verzie.

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

Tretia hodnota dovnútra translate3dalebo hodnota translateZdovnútra posúva prvok smerom k divákovi, záporné hodnoty preč.

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

Tretia hodnota v scale3dalebo hodnota v scaleZovplyvňuje mierku pozdĺž osi z (napr. Imaginárna čiara vychádzajúca priamo z obrazovky).

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

rotateXa rotateYbude otáčať prvok v 3D priestore okolo týchto osí. rotate3dumožňuje určiť bod v 3D priestore, v ktorom sa má prvok otáčať dokola.

matrix3d(… )

Spôsob, ako programovo opísať 3D transformáciu v mriežke 4 × 4. Nikto z nich nikdy nenapíše jeden z nich.

perspective(value)

Táto hodnota neovplyvňuje samotný prvok, ale ovplyvňuje transformácie 3D transformácií zostupných prvkov, čo im umožňuje mať všetky konzistentnú hĺbkovú perspektívu.

Viac informácií

  • Dokumenty MDN o transformácii a použití.
  • Dokumentácia Davida DeSandra o 3D transformáciách
  • Surfin 'Safari: 3D transformácie
  • Špecifikácia W3C pri transformáciách CSS3
  • Úvod do transformácie CSS 3D

Podpora prehľadávača

2D transformácie

Chrome Safari Firefox Opera IE Android iOS
akýkoľvek 3,1+ 3,5+ 10,5+ 9+ 4,1+ Najmenej 4

3D transformácie

Chrome Safari Firefox Opera IE Android iOS
10+ 4+ 12+ žiadny 10+ 4,1+ 5+

Predpony predajcu

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