Transformovat - Triky CSS

Anonim

transformVlastnost umožňuje vizuálně manipulovat prvku zkosení, otočení, překládání nebo změnu měřítka:

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

I s deklarovanou výškou a šířkou bude tento prvek nyní zmenšen na dvacetinásobek své původní velikosti:

Podívejte se na vysvětlení transformace pera pomocí CSS-Tricks (@ css-tricks) na CodePen.

Dáte-li této funkci dvě hodnoty, roztáhne ji vodorovně o první a svisle o druhou. V níže uvedeném příkladu bude prvek nyní dvojnásobek šířky, ale poloviny výšky původního prvku:

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

Nebo můžete být konkrétnější bez použití zkratkové funkce:

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

Ale scale()je to jen jedna z mnoha transformačních funkcí, které jsou k dispozici:

Hodnoty

  • scale(): Ovlivňuje velikost prvku. To platí také pro font-size, padding, heighta widthprvku, taky. Je to také zkratková funkce pro funkce scaleXa scaleY.
  • skewX()a skewY(): Nakloní prvek doleva nebo doprava, jako by se obdélník změnil na rovnoběžník. skew()je zkratka, která kombinuje skewX()a skewYpřijímá obě hodnoty.
  • translate(): Posune prvek do strany nebo nahoru a dolů.
  • rotate(): Otočí prvek ve směru hodinových ručiček z jeho aktuální polohy.
  • matrix(): Funkce, která pravděpodobně není určena k ručnímu psaní, ale kombinuje všechny transformace do jedné.
  • perspective(): Neovlivňuje samotný prvek, ale ovlivňuje transformace 3D transformací sestupných prvků, což jim umožňuje konzistentní hloubkovou perspektivu.

Překroutit

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

Funkce skewXa skewYtransformace nakloní prvek tak či onak. Pamatujte: neexistuje žádná zkratková vlastnost pro zkosení prvku, takže budete muset použít obě funkce. V níže uvedeném příkladu můžeme zkosit čtverec 100px x 100px vlevo a vpravo pomocí skewX:

Podívejte se na vysvětlení transformace pera pomocí CSS-Tricks (@ css-tricks) na CodePen.

Zatímco v tomto příkladu můžeme prvek zkosit svisle pomocí skewY:

Podívejte se na vysvětlení transformace pera pomocí CSS-Tricks (@ css-tricks) na CodePen.

Nyní pojďme skew()kombinovat tyto dva:

Podívejte se na
vlastnost zkratky Pen skew () od CSS-Tricks (@ css-tricks)
na CodePen.

Točit se

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

Tím se prvek otočí ve směru hodinových ručiček z jeho původní polohy, zatímco záporná hodnota by jej otočila v opačném směru. Zde je jednoduchý animovaný příklad, kdy se čtverec nadále otáčí o 360 stupňů každé tři sekundy:

Podívejte se na vysvětlení transformace pera pomocí CSS-Tricks (@ css-tricks) na CodePen.

Můžeme také použít rotateX, rotateYa rotateZfunkcí, jako tak:

Podívejte se na vysvětlení transformace pera pomocí CSS-Tricks (@ css-tricks) na CodePen.

přeložit

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

Tato transformační funkce posune prvek do strany nebo nahoru a dolů. Proč nepoužívat pouze horní / levý / dolní / pravý? Někdy je to trochu matoucí. Přemýšlel bych o nich jako o rozvržení / umístění (stejně mají lepší podporu prohlížeče) a to jako způsob, jak přesunout tyto věci kolem jako součást přechodu nebo animace.

Těmito hodnotami by mohla být libovolná hodnota délky, například 10px nebo 2,4em. Jedna hodnota posune prvek doprava (záporné hodnoty doleva). Pokud je zadána druhá hodnota, tato druhá hodnota ji posune dolů (záporné hodnoty nahoru). Nebo můžete získat konkrétní:

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

Je důležité si uvědomit, že použití prvku transformnezpůsobí, že kolem něj budou proudit další prvky. Pomocí translateníže uvedené funkce a posunutím zeleného čtverce z jeho původní polohy si všimneme, jak okolní text zůstane pevně na svém místě, jako by byl čtverec blokovým prvkem:

Podívejte se na vysvětlení transformace pera pomocí CSS-Tricks (@ css-tricks) na CodePen.

Je také třeba poznamenat, že translatena rozdíl od toho bude hardwarová akcelerace, pokud chcete tuto vlastnost animovat position: absolute.

Více hodnot

Pomocí seznamu oddělených mezerami můžete do transformvlastnosti přidat více hodnot :

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

Stojí za zmínku, že existuje pořadí, ve kterém budou tyto transformace provedeny, ve výše uvedeném příkladu bude nejprve proveden `skew` a poté bude prvek změněn.

Matice

Funkci matrixtransformace lze použít ke sloučení všech transformací do jedné. Je to trochu jako zkratka pro transformaci, jen nevěřím, že by to mělo být psáno ručně. Existují nástroje, jako je Matrix Resolutions, které mohou převést skupinu transformací do jediné maticové deklarace. Možná v některých situacích to může zmenšit velikost souboru, i když autorovy nepřátelské mikro optimalizace pravděpodobně nestojí za váš čas.

Pro zvědavé toto:

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

lze také vyjádřit jako:

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

3D transformace

Většina výše uvedených vlastností má jejich 3D verze.

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

Třetí hodnota v translate3dnebo hodnota v translateZposune prvek směrem k divákovi, záporné hodnoty pryč.

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

Třetí hodnota v scale3dnebo hodnota v scaleZovlivňuje měřítko podél osy z (např. Imaginární čára vycházející přímo z obrazovky).

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

rotateXa rotateYotočí prvek ve 3D prostoru kolem těchto os. rotate3dumožňuje určit bod ve 3D prostoru, ve kterém se bude prvek otáčet.

matrix3d(… )

Způsob, jak programově popsat 3D transformaci v mřížce 4 × 4. Nikdo z nich nikdy nenapíše jeden z nich.

perspective(value)

Tato hodnota neovlivňuje samotný prvek, ale ovlivňuje transformace 3D transformací sestupných prvků, což jim umožňuje mít všechny konzistentní hloubkovou perspektivu.

Více informací

  • Dokumenty MDN o transformaci a použití.
  • Dokumentace Davida DeSandra týkající se 3D transformací
  • Surfin 'Safari: 3D transformace
  • Specifikace W3C u transformací CSS3
  • Úvod do CSS 3D transformací

Podpora prohlížeče

2D transformace

Chrome Safari Firefox Opera TJ Android iOS
Žádný 3.1+ 3,5+ 10,5+ 9+ 4.1+ Nejméně 4

3D transformace

Chrome Safari Firefox Opera TJ Android iOS
10+ 4+ 12+ žádný 10+ 4.1+ 5+

Předpony dodavatele

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