Domov › Telefon › Přesuny a transformace v CSS3. Úvod do CSS transformací. Diagonální pohyb

Přesuny a transformace v CSS3. Úvod do CSS transformací. Diagonální pohyb

Funkce rotation() v CSS provádí dvourozměrnou transformaci rotace na prvku kolem pevného středu. V tomto případě se blok nedeformuje a neovlivňuje polohu sousedních HTML kontejnerů. Metoda umožňuje určit úhel natočení. Navíc je možné nastavit libovolný střed otáčení.

Bloková transformace

Rotace() je v CSS transformační funkce, takže musí být předána vlastnosti transform prvku.

Prvek ( transformace: otočit (45 stupňů); )

Prvním a jediným argumentem je úhel, o který bude objekt otočen. Rotace se provádí ve dvourozměrném prostoru. Pro 3D transformace jsou k dispozici CSS funkce RotovatX(), RotovatY(), RotovatZ() a Rotovat3d().

Místo na stránce původně obsazené prvkem zůstává pro něj vyhrazeno. Vizuální pohyb nastává v nové vrstvě bez pohybu sousedních bloků.

Úhel natočení

Argument úhlu předaný metodě musí být typu CSS . Skládá se z číselné hodnoty a měrné jednotky deg (z anglického stupně - stupeň).

Kladný úhel určuje rotaci objektu ve směru hodinových ručiček, záporný úhel - v opačném směru.

Střed otáčení

Ve výchozím nastavení je blok otočen kolem svého geometrického středu. Chcete-li tento bod změnit, musíte použít vlastnost transform-origin.

Standardně to vyžaduje tři parametry, které určují souřadnice podél os X, Y a Z. Protože však Rotate() v CSS je dvourozměrná transformace, bude stačit předat pouze dvě hodnoty.

Prvek ( transformace: otočit (45 stupňů); transformace-origin: 20px 100 %; )

Souřadnici podél každé osy lze zadat v libovolných platných jednotkách délky, procentech velikosti bloku nebo pomocí klíčových slov top, bottom, left, right. Počátek se nachází v levém horním rohu obdélníkové nádoby.

Animace otáčení

Vlastnost transform se dobře hodí k dynamickým změnám, proto vám CSS umožňuje vytvořit animaci rotace prvku ve dvourozměrném prostoru.

Pokud chcete otočit objekt v reakci na konkrétní akci uživatele, jako je najetí kurzorem, můžete použít vlastnost přechodu CSS, která způsobí, že se hodnoty ostatních vlastností budou pomalu měnit.

Element ( přechod: transformace 2s; ) element:hover ( transformace: rotace (180 stupňů); )

Na původní prvek nejsou aplikovány žádné transformace, ale když na něj najedete myší, blok se během dvou sekund plynule otočí o 180 stupňů. Když uživatel odstraní kurzor, dojde ke stejně hladkému otočení do původní polohy.

Složitější způsob, jak animovat objekt, je definovat jeho sekvenci snímků pomocí vlastností a pravidla @keyframes.

Element ( název-animace: otočit; trvání-animace: 2 s; počet-iterací animace: nekonečno; funkce časování animace: lineární; ) @klíčové snímky se otáčí ( od ( transformace: otáčet (0 stupňů); ) do ( transformovat: otáčet (360°);

Na zadaný prvek se aplikuje animace otočení, která provede úplné otočení od 0 do 360 stupňů během dvou sekund. Vlastnost animation-itation-count nastaví animaci na neomezené opakování a funkce animation-timing- nastaví efekt hladkého přechodu. Kombinace vlastnosti in s transformacemi otočení umožňuje vytvářet nádherné dynamické efekty.

Vlastnost transformace CSS (od slova „transformace“) umožňuje upravit prvek na stránkách HTML. Například můžete

střídat
přemístit
změnit měřítko
převýšení
zkombinujte výše uvedené kroky

Díky této vlastnosti můžete vytvářet zajímavé efekty bez použití JavaScriptu, což umožňuje zrychlit prohlížeč. Je také důležité poznamenat, že je možné kombinovat účinek s časovými prodlevami.

1. Syntaxe transformace CSS

transform : transform1 [transform2 ];

Je povoleno několik akcí s objektem současně (například otočení, posunutí a změna měřítka).

Poznámka o prohlížečích

Ne všechny prohlížeče transformaci podporují. Musíte použít předpony CSS dodavatele:

-ms-transform - pro IE9 a starší (pod verzí 9 není transformace podporována
-webkit-transform - pro Chrome, Safari, Android a iOS
-o-transform - pro Operu do verze 12.10
-moz-transform - pro Firefox do verze 16.0

2. transform:rotate(x) - rotace objektu

Pro otočení prvku existuje příkaz Rotovat(x) . Umožňuje otočit objekt o x stupňů ve směru nebo proti směru hodinových ručiček. Hodnota x musí být uvedena ve stupních stupňů

Příklad #1. Otočení objektu v html prostřednictvím transformace

výška:100px;

pozadí :#444 ;

okraj :30px ;

-ms-transform : otočení (20 stupňů);

-webkit-transform : otočení (20 stupňů);

-o-transformace: otočení (20 stupňů);

Poznámka

Vlastnosti:

-ms-transform : otočení (20 stupňů); -webkit-transform : otočení (20 stupňů); -o-transformace: otočení (20 stupňů); -moz-transform : rotace (20 stupňů);

Nezbytné pro správnou funkci ve starších verzích prohlížečů. V následujících příkladech je také napíšeme.

Poznámka

.kvadrat2 ( // bez otočení šířka :100px ; výška :100px ; pozadí :#444 ; okraj :30px ; ) .kvadrat2:hover ( //

rotace při vznášení

Dalším příkazem, na který se podíváme, je příkaz k přesunutí objektu translate(x,y) , kde argumenty v závorkách jsou posunutí podél osy X a Y.

Příklad #4. Přemístění objektů v html prostřednictvím transformace

Poznámka

Takové efekty se často používají. To koneckonců umožňuje vytvářet animace bez JavaScriptu. V tomto případě se čtverec pohne okamžitě (bez animace).

Poznámka

Pokud potřebujete použít transformaci pouze podél jedné z os, můžete použít speciální případ: translateX(x) - X offset, translateY(y) - Y offset.

4. transform:scale(x,y) - škálování objektu

Příkaz pro změnu měřítka objektu je scale(x,y) , kde argumenty v závorkách jsou měřítko podél os X a Y.

Příklad #5. Změna velikosti objektů v html

Poznámka

Při najetí myší se čtverec zvětší horizontálně o 50 % (koeficient 1,5) a vertikálně o 30 % (koeficient 1,3). Hodnota 1 znamená žádné škálování. Cokoli menší než 1 znamená, že se objekt zmenšuje.

Poznámka

Pokud potřebujete použít transformaci pouze podél jedné z os, můžete použít speciální případ: scaleX(x) - měřítko podél X, scaleY(y) - měřítko podél Y.

5. transform:skew - naklonění objektu

Příkaz pro naklonění objektu je skew(x,y) , kde argumenty v závorkách jsou sklon podél os X a Y. Sklon musí být specifikován ve stupních deg.

Příklad #6. Zkosení objektů v html

Poznámka

Při vznášení se čtverec díky náklonu promění v diamant.

Poznámka

Pokud potřebujete použít transformaci pouze podél jedné z os, můžete použít speciální případ: skewX(x) - sklon v X, skewY(y) - sklon v Y.

6. Kombinace transformovaných hodnot

Je čas podívat se na zajímavé efekty, kterých lze dosáhnout kombinací různých transformací dohromady. Aplikujme tři akce najednou pro změnu objektu: změna měřítka (měřítko), rotace (otočení) a posunutí (přeložení).

Příklad #7. Kombinace transformačních hodnot

Počáteční hodnota: čtverec s černým okrajem. Když na něj najedete, otočí se do kruhu s červeným rámečkem a změní barvu.

Poznámka

7. Jiné transformační hodnoty

Podívali jsme se na nejzákladnější hodnoty transformace. Zvažme další možnosti.

žádná - žádná transformace (ve výchozím nastavení je povolena);
matrix(x,x,x,x,x,x) - 2D transformace pomocí matice 6 hodnot;
matrix3d(x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x)- 3D transformace pomocí matice 16 hodnot;
translate3d(x,y,z) - 3d pohyb (oproti normálnímu pohybu je zde přidána třetí souřadnice);
scale3d(x,y,z) - měřítko ve 3d (oproti normálnímu měřítku je zde přidána třetí souřadnice);
rotace3d(x,y,z) - rotace ve 3d (oproti běžné rotaci je zde přidána třetí souřadnice);
rotovatX(x) - 3d rotace podél osy X;
rotovatY(x) - 3d rotace podél osy Y;
rotovatZ(x) - 3d rotace podél osy Z;
perspektiva(n) - perspektiva pro transformaci 3D prvku;

V JavaScriptu je vlastnost transformace CSS dostupná prostřednictvím následujících vlastností:

object.style.transform="Transformation" document.getElementById("elementID").style.transform = ""

Možná se ptáte: „Proč vůbec používat transformaci, když můžete jednoduše změnit data objektu, jak potřebujeme, například změnou velikosti objektu? Rozdíl je v tom, že vlastnost transform během transformace neposouvá další prvky na stránce. V případě jednoduché změny velikosti objektu to nevyhnutelně vede k posunu sousedních objektů, což je zpravidla ošklivé.

Již dříve jsme viděli, že CSS nám umožňuje aplikovat barvy, nastavit písma, změnit nastavení textu, umístit prvky, dát jim prostor, ozdobit je a přesunout.

Proměny v CSS představují množinu funkcí, které umožňují dávat určitým způsobem tvar prvku:

přeložit : přesune prvek podél tří os (x, y a z);
otočit : otočí prvek kolem jeho středového bodu;
měřítko : mění velikost prvku;
skew : Deformuje prvek.

Transformační vlastnosti

K dispozici jsou tři vlastnosti pro transformaci:

transformace určuje které funkce bude použito (přeložit, otočit, změnit měřítko atd.);
transform-origin umožňuje změnit počáteční bod transformace (funguje jako background-position );
transformační styl pro 3D nastavení.

Všimněte si, že na rozdíl od background a border , vlastnost transform není zkrácený.

Zde použijeme pouze transform .

Nepřerušuje tok

Aby se zabránilo neočekávanému chování, transformovatelné prvky neovlivňují průtok. Bez ohledu na rotaci, změnu měřítka nebo přesun neovlivní ostatní prvky.

přeložit

Funkce translate() umožňuje přesunout prvek v rovině (podél os x a y). Přijímá buď:

jeden parametr: posouvá prvek podél osy x;
dva parametr: první hodnota je pro osu x, druhá pro osu y.

Je to podobné jako při použití relativního umístění pomocí hodnot vlevo a nahoře.

Pojďme předělat naši animaci smyček pomocí překladu namísto umístění vlevo/nahoře:

@keyframes translating ( 0 % ( transform: translate(0, 0); ) 25 % ( transform: translate(240px, 0); ) 50 % ( transform: translate(240px, 140px); ) 75 % ( transform: translate( 0, 140px ) 100 % ( transformace: translate(0, 0); ) ) p (animace: překlad 4s lineární nekonečno; )

Pamatujte: transformace je stylová záležitost vlastnictví, translate() je význam(a zároveň funkce), aplikovaný k této nemovitosti.

Pomocí translateX() a translateY() můžete přesunout prvek pouze podél osy x a y.

střídat

Funkce rotace() umožňuje otočit prvek kolem pevného bodu. Ve výchozím nastavení dochází k rotaci kolem středu prvku. Představte si to jako desku přehrávanou na gramofonu.

Rotate() pouze přijímá jeden parametr, který je hodnotou úhel a je definován ve stupních (deg), gradech (grad), radiánech (rad) nebo otáčkách (turn) (jedna otáčka je ekvivalentní plnému kruhu).

@klíčové snímky rotující ( 0 % ( transformace: rotace (0 stupňů); ) 100 % ( transformace: rotace (360 stupňů); ) ) p ( animace: rotace 4s lineárně nekonečno; )

měřítko

Funkce scale() umožňuje změnit velikost prvku. Může zvětšit nebo zmenšit prvek. Funkce přijímá buď:

jeden parametr: změnit velikost prvku rovnoměrně na výšku a šířku;
dva parametr: první hodnota mění velikost prvku vodorovně, druhá - svisle.

Rozsah možných hodnot:

1: prvek si zachová svou původní velikost;
2: prvek zdvojnásobí svou velikost;
0,5: prvek se zmenší na polovinu;
0: Prvek v podstatě zmizí (protože jeho výška a šířka jsou nulové);
-1: Prvek se odráží.

@keyframes škálování ( 0 % ( transformace: scale(1); ) 20 % ( transformace: scale(2); ) 40 % ( transformace: scale(0,5); ) 60 % ( transformace: scale(0); ) 80 % ( transformace: měřítko(-1); ) 100 % ( transformace: měřítko(1); ) ) p ( animace: měřítko 10s kroky(1) 0s nekonečno; )

Stejně jako translate() má funkce scale() verze x a y: scaleX() a scaleY() pro změnu velikosti vodorovně a svisle.

překroutit

Funkce skew() umožňuje deformovat prvek, pohybující se jejími stranami podél čar.

Tato konverzní funkce se používá zřídka, protože její důsledky jsou zcela nepředvídatelné a výsledek nemusí být nutně atraktivní. Nicméně, podívejme se, jak to funguje.

Podobně jako scale() i funkce skew() přijímá buď:

jeden parametr: prvek je zdeformován vodorovně;
dva parametr: první hodnota deformuje prvek horizontálně, druhá - vertikálně.

Podobně jako Rotate() i skew() přijímá pouze hodnoty úhlu, jako jsou stupně (deg).

@keyframes skewing ( 0 % ( transformace: skew(0deg); ) 20 % ( transformace: skew (10deg); ) 40 % ( transformace: skew(45deg); ) 60 % ( transformace: skew(90deg); ) 80 % ( transformace: zkosení (120 stupňů); ) 100 % ( transformace: zkosení (0 stupňů); ) ) p ( animace: zkosení 10 s kroky(1) 0 s nekonečno; )

3D funkce

Viděli jsme, jak fungují transformační funkce rovina podél os x a y.

Například:

translate() má až dva parametry:
- přeložit(x)
- přeložit (x, y)
translateX() pouze pro osu x
translateY() pouze pro osu y

Ale pro všechny tyto funkce existuje také 3D verze.

Například translate() má verzi translate3d(), která provádí převod na tři rozměry, což znamená, že zahrnuje také osa z(existuje také samostatná funkce translateZ).

Vizuální model formátování CSS popisuje souřadnicový systém v rámci každého umístěného prvku. Souřadnicový systém je referenčním bodem pro vlastnosti odsazení. Pozici a rozměry v tomto souřadnicovém prostoru lze považovat za dané v pixelech vzhledem k referenčnímu bodu, přičemž kladné hodnoty jdou doprava a dolů. Tento souřadnicový prostor lze změnit pomocí vlastnosti transform.

CSS3 transformace umožňují přesouvat, otáčet a měnit měřítko prvků. Transformace transformují prvek, aniž by ovlivnily ostatní prvky webové stránky, tzn. ostatní prvky se vůči němu nepohybují.

Mezi prvky, které lze transformovat, patří prvky se zobrazením: blok; a zobrazení: inline-block; a také prvky, jejichž hodnota vlastnosti display se vyhodnotí jako tabulka-řádek , skupina-řádků tabulky , skupina-záhlaví-tabulky , skupina-zápatí tabulky , buňka-tabulka nebo titulek tabulky . Prvek s jinou hodnotou vlastnosti transform než none je považován za transformovaný.

Existují dva typy transformací CSS3 − 2D A 3D. 2D transformace transformovat prvky ve dvourozměrném prostoru pomocí 2D transformační matice. Tato matice se používá k výpočtu nových souřadnic objektu na základě hodnot vlastností transformace a transformace. Transformace ovlivňují pouze vizuální vykreslování. Pokud jde o rozvržení stránky, mohou vést k přetečení obsahu bloku. Ve výchozím nastavení je transformační bod ve středu prvku.

2D transformace prvků

Podpora prohlížeče

TJ: 10,0, 9,0 -ms-
Okraj: 12.0
Firefox: 16,0, 3,5 -moz-
Chrome: 36.0, 4.0 -webkit-
Safari: 9.0, 3.1 -webkit-
Opera: 23,0, 15,0 -webkit-
iOS Safari: 9, 7.1 -webkit-
Prohlížeč Android: 53, 2.1 -webkit-
Chrome pro Android:-webkit-

1. Transformace 2D transformačních funkcí

Vlastnost určuje typ transformace prvku. Vlastnost je popsána pomocí transformační funkce, které posunou prvek vzhledem k jeho aktuální pozici na stránce nebo změní jeho původní velikost a tvar. Neděděno.

Platné hodnoty:

matrix() - libovolné číslo
translate() , translateX() , translateY() — jednotky délky (kladné a záporné), %
scale() , scaleX() , scaleY() — libovolné číslo
rotovat() - úhel (stupeň, gradace, rad nebo otočení)
skew() , skewX() , skewY() — úhel (deg, grad, rad)

Funkce	Popis
žádný	Výchozí hodnota znamená žádnou transformaci. Také zruší transformaci prvku ze skupiny transformovatelných prvků.
matice (a, c, b, d, x, y)	Odsadí prvky a nastaví způsob jejich transformace, což vám umožní kombinovat více funkcí 2D transformace do jedné. Otočení, změna měřítka, naklánění a přemístění jsou povoleny jako transformace. Hodnota a změní horizontální měřítko. Hodnota mezi 0 a 1 prvek snižuje a hodnota větší než 1 jej zvyšuje. Hodnota c deformuje (posune) strany prvku podél osy Y, kladná hodnota nahoru, záporná hodnota dolů. Hodnota b deformuje (posune) strany prvku podél osy X, kladná hodnota doleva, záporná hodnota doprava. Hodnota d mění vertikální měřítko. Hodnota menší než 1 prvek snižuje, větší než 1 jej zvyšuje. Hodnota x posouvá prvek podél osy X, kladná doprava, záporná doleva. Hodnota y posune prvek podél osy y, kladná hodnota jej posune dolů a záporná hodnota jej posune nahoru.
přeložit(x,y)	Posune prvek na nové místo a přesune jej vzhledem k jeho normální poloze doprava a dolů pomocí souřadnic X a Y, aniž by to ovlivnilo sousední prvky. Pokud potřebujete posunout prvek doleva nebo nahoru, musíte použít záporné hodnoty.
přeložitX(n)	Posune prvek vzhledem k jeho normální poloze X.
přeložitY(n)	Posune prvek vzhledem k jeho normální poloze podél osy Y.
měřítko (x, y)	Změní měřítko prvků tak, aby byly větší nebo menší. Hodnoty mezi 0 a 1 zmenšují prvek. První hodnota měří prvek na šířku, druhá - na výšku. Záporné hodnoty zobrazují prvek zrcadlově.
scaleX(n)	Funkce přizpůsobí šířku prvku tak, aby byl širší nebo užší. Pokud je hodnota větší než jedna, prvek se rozšíří, pokud je hodnota mezi jednou a nulou, prvek se zúží. Záporné hodnoty zobrazí prvek vodorovně zrcadlený.
měřítkoY(n)	Funkce přizpůsobí výšku prvku tak, aby byl vyšší nebo kratší. Pokud je hodnota větší než jedna, prvek bude vyšší, je-li hodnota mezi jednou a nulou, prvek se sníží. Záporné hodnoty zobrazí prvek svisle zrcadlený.
otočit (úhel)	Otočí prvky o zadaný počet stupňů, záporné hodnoty od -1° do -360° otočí prvek proti směru hodinových ručiček, kladné hodnoty otočí prvek ve směru hodinových ručiček. Hodnota otočení (720 stupňů) otočí prvek o dvě celé otáčky.
zkosit (x-úhel,y-úhel)	Používá se k deformaci (deformování) stran prvku vzhledem k souřadnicovým osám. Pokud je zadána jedna hodnota, druhá bude určena automaticky prohlížečem.
skewX(úhel)	Deformuje strany prvku vzhledem k ose X.
skewY (úhel)	Deformuje strany prvku vzhledem k ose Y.
počáteční	Nastaví hodnotu vlastnosti na výchozí hodnotu.
zdědit	Zdědí hodnotu vlastnosti z nadřazeného prvku.

Syntax

Div ( -webkit-transform: otočit (360 stupňů); -ms-transform: otočit (360 stupňů); transformovat: otočit (360 stupňů); )

Najeďte myší na bloky a uvidíte transformační funkce v akci.

2. Transformační bod transformace-počátek

Vlastnost umožňuje posunout střed transformace, vůči kterému se mění poloha/velikost/tvar prvku. Výchozí hodnota je střed nebo 50 % 50 % . Nastaveno pouze pro transformované prvky. Neděděno.

02/12/17 2,9 tis

Vlastnost transformace CSS umožňuje vizuálně transformovat prvek ve 2D nebo 3D prostoru. Pomocí transformace lze prvky přesouvat, otáčet a měnit jejich měřítko ve dvou nebo třech rozměrech.

Přesněji řečeno, vlastnost transform transformuje souřadnicový systém prvku, což má za následek transformaci prvku v prostoru. Jako hodnotu bere seznam transformačních funkcí (uvedených níže) nebo hodnotu none . Souřadnicový systém prvku se převede na konečnou hodnotu, kterou získáme spuštěním každé funkce do její odpovídající matice a následným vynásobením těchto matic.

Jakákoli hodnota vlastnosti transform než none má za následek jak kontext zásobníku, tak obsahující blok. To znamená, že převáděný prvek funguje jako kontejner pro pevně umístěné podřízené prvky.

Transformační matice také závisí na hodnotě vlastnosti transform-origin, která se používá k označení původu transformace.

Souřadnicový systém

Každý prvek v CSS má souřadnicový systém, jehož počátek je umístěn v levém horním rohu prvku.

Při použití transformace CSS se počátek souřadnicového systému přesune do středu prvku. Důvodem je, že výchozí hodnota vlastnosti transform-origin je 50%50. Všechny transformace jsou poté aplikovány na prvek na základě nové polohy souřadnicového systému.

Souřadnicový systém počátku a souřadnicový systém při použití transformace s aplikovanou výchozí hodnotou vlastnosti transformace-počátek

Pomocí vlastnosti transform-origin můžete určit, kam se má přesunout počátek souřadnic. V závislosti na efektu transformace se používají různé výchozí pozice transformace.

Pokud použijete vlastnost transform k otočení nebo zkosení prvku, totéž se stane se souřadnicovým systémem a všechny následné transformace budou použity na základě nového souřadnicového systému. Proto na pořadí transformací záleží, různé sekvence povedou k různým transformacím. To dává smysl, protože transformace se převádějí do matic a násobení dvou matic v matematice poskytuje různé výsledky v závislosti na pořadí těchto matic. Například a x b nedává stejný výsledek jako b x a ( pokud žádný z nich není jedinečný).

Pokud potřebujete přesunout prvek pomocí transformace textu CSS na jinou pozici a otočit jej v nové pozici, musíte to udělat v tomto pořadí: přesunout a poté otočit. Pokud prvek otočíte, jeho souřadný systém se otočí a jeho pohyb v určitém směru nepřinese očekávaný výsledek.

Pokud otočíte prvek například o 90 stupňů kolem jeho osy y, jeho osa x bude směřovat hluboko do obrazovky, v opačném směru než vy. Pokud tedy poté použijete pohyb podél osy x, prvek se nepohne doprava, bude se pohybovat směrem od vás. Při transformaci je proto důležité věnovat pozornost pořadí, v jakém jsou funkce vlastnosti transform specifikovány. První funkce bude použita jako první a poslední funkce bude použita jako poslední.

Poznámky

Transformace aplikované na prvek ovlivňují jeho vizuální vzhled, ale neovlivňují žádný aspekt CSS kromě vlastnosti přetečení. Prostor, který prvek zabíral před transformací, bude obsazen po transformaci a samotná transformace neovlivní strukturu ostatních prvků kolem něj. Vlastnost CSStransform neovlivňuje tok obsahu, ve kterém je transformovaný prvek umístěn. Zároveň je při přepočtu zohledněna oblast výplně.

Toto chování je podobné tomu, co se stane, když jsou prvky odsazeny pomocí relativního umístění. Pokud je tedy vlastnost overflow nastavena na rolování nebo auto , budou se podle potřeby zobrazovat posuvníky, které vám umožní zobrazit jakýkoli obsah, který se po převodu přesunul za viditelnou oblast.

Ačkoli některé hodnoty vlastnosti transform umožňují transformovat prvek v 3D souřadnicovém systému, samotné prvky nejsou 3D. Existují ve dvourozměrné rovině ( rovný povrch) a nemají žádnou hloubku.

Když je prvek transformován, je pevná hodnota vlastnosti background-attachment považována za hodnotu posuvníku. Vypočtená hodnota pozadí se nezmění.

Kromě transformace-origin může transformace používat vlastnosti perspective a perspective-origin k nastavení hloubky pro scénu a vlastnost transform-style k zachování definice 3D prostoru. To je užitečné, když děláte vnořené CSS transformace. Všechny tyto vlastnosti se používají ve vzájemné kombinaci k vytvoření Transformace CSS ve dvou nebo třech rozměrech.

Oficiální syntaxe

Syntax:

transformace: žádná |<список преобразований>

Počáteční hodnota: žádná
Platí pro: transformovatelný prvek
Animovatelné: ano

Poznámky

<список преобразований>je seznam transformačních funkcí.

Hodnoty

Transformaci můžete použít na prvek pomocí jedné z následujících hodnot vlastnosti transform:

CSS transformace rotation()
translateX()
přeložitY()
měřítko()
scaleX()
scaleY()
střídat()
překroutit()
překroutitX
šikmýY
matice()
přeložitZ
translate3d()
scaleZ()
scale3d()
otočitX()
otočitY()
otočitZ()
otočit3d()
matrix3d()
perspektivní()

Některé z těchto funkcí se používají k aplikaci 2D transformací, jiné se používají k aplikaci 3D transformací.

2D transformační funkce:

přeložit()

transform: translate(tx [, ty ]?); /* Otazník označuje druhou hodnotu, která je volitelná * /

Funkce překladu transformace CSS se používá k přesunutí prvku podél vektoru, kde tx je posun x a ty je posun y. Pokud není zadáno ty, předpokládá se, že jeho hodnota je nula a prvek se posune pouze podél osy x. Pokud nejsou zadány žádné jednotky, bude se s číslem zacházet jako „ vlastní jednotky«.

Kladná hodnota posunu posune prvek ve směru osy a záporná hodnota posunu prvek v opačném směru k ose.

Příklady:

transform: translate(100px); /* posune prvek o 100 pixelů podél osy x */ transform: translate(-100px); /* posune prvek o 100px na ose x */ transform: translate(50px, 300px); /* posune prvek o 50 pixelů doprava a 300 pixelů dolů */ transform: translate(50%, 10%); /* posune prvek o 50 % jeho šířky doleva a o 10 % jeho výšky dolů */ transform: translate(-100%); /* posune prvek o -100 % doleva */ transform: translate(100px, 100px); /* výsledek je uveden na obrázku níže */

Výsledek použití posunu na prvek:

Výsledek použití translate(100px, 100px) na prvek. Všimněte si transformované polohy počátku.

translateX()

transformovat: translateX(tx);

Funkce CSS transform translateX() se používá k přesunutí prvku o danou vzdálenost podél osy x. Hodnota tx se zadává v jednotkách délky nebo procentech. Pokud nejsou zadány žádné jednotky, bude se s číslem zacházet jako „ vlastní jednotky«.

Kladná hodnota posunu posune prvek ve směru osy x a záporná hodnota posunu jej posune v opačném směru.

Příklady:

transform: translateX(300px); transformace: translateX(-50%); transformace: translateX(150%);

přeložitY()

transformovat: translateY(ty);

Funkce translateY() se používá k posunutí prvku o zadanou vzdálenost podél osy Y. Hodnota ty se zadává v jednotkách délky nebo procentech. Pokud nejsou jednotky specifikovány, číslo bude považováno za " vlastní jednotky«.

Kladná hodnota posunu posune prvek ve směru osy y a záporná hodnota posunu jej posune v opačném směru.

Příklady:

transform: translateY(300px); transformace: translateY(-50%); transformace: translateY(150%);

měřítko()

transform:scale( [, ]?); /* Otazník označuje druhou hodnotu, která je volitelná * /

Pro změnu měřítka se používá funkce CSS transformace ( protažení nebo stlačení) prvku změnou jeho velikosti nahoru nebo dolů. Jako svou hodnotu bere jedno nebo dvě čísla bez jednotek, sx a sy, kde sx mění velikost prvku podél osy x a sy mění velikost prvku podél osy y. Pokud je zadána pouze jedna hodnota ( sx), druhá hodnota ( sy) bude považován za rovný prvnímu.

Pokud je zadaná hodnota větší než jedna, pak se prvek roztáhne - bude se jevit větší v odpovídajícím směru. Pokud je hodnota rovna jedné, pak prvek zůstane nezměněn ( v příslušném směru).

Pokud je hodnota větší než 0, ale menší než 1, pak je prvek komprimován. Pokud je hodnota nula, prvek zmizí. Záporné hodnoty jsou přijatelné, ale nemění velikost prvku. Určují rotaci transformovaného prvku v určitém směru.

Příklady:

transform: scale(1, 1); /* prvek zůstane nezměněn */ transform: scale(2, 2); /* prvek se objeví dvakrát větší než jeho původní rozměry */ transform: scale(1, 2); /* prvek je vertikálně roztažen na dvojnásobek své původní výšky, jeho horizontální rozměry zůstávají nezměněny. Podobného efektu je dosaženo použitím funkce scaleY(2) (viz níže) */ transform: scale(2, 1); /* prvek je horizontálně roztažen na dvojnásobek původní šířky, jeho vertikální rozměry zůstávají nezměněny. Podobného efektu je dosaženo použitím funkce scaleX(2) (viz níže) */ transform: scale(3); /* prvek se zvětší 3x */ transform: scale(0.5); /* prvek se zmenší na polovinu původní velikosti */ transform: scale(0); /* prvek zmizí */ transform: scale(-1); /* otočí prvek v obou směrech */

Následující obrázek ukazuje výsledek aplikace různých transformací scale() na obrázek. První vlevo je obrázek bez jakýchkoliv transformací. Druhý je výsledkem použití transformace: scale(2); , třetí je výsledkem použití transform: scale(0.5) a čtvrtý je výsledkem použití transform: scale(0.5, 1.5); .

Všimněte si, jak se obrázky vzájemně překrývají, protože transformace každého z nich neovlivní tok obsahu kolem něj:

Výsledek aplikace různých transformací scale() na obrázek. První vlevo je obrázek bez jakýchkoliv transformací. Druhý je výsledkem aplikace transform: scale(2);, třetí je výsledkem aplikace transform: scale(0.5) a čtvrtý je výsledkem aplikace transform: scale(0.5, 1.5);.

Následující obrázek je výsledkem použití transformačního měřítka CSS (a jeho variací) se zápornými hodnotami:

Obrázek znázorňující výsledek použití funkce scale() se zápornými hodnotami.

scaleX()

transform:scaleX( );

Funkce scaleX() se používá ke zmenšení, roztažení nebo zmenšení prvku a jeho zvětšení nebo zmenšení podél osy x. Bere jako hodnotu číslo sx, které se používá ke změně velikosti prvku podél osy x.

Pokud je zadaná hodnota větší než 1, pak se prvek roztáhne - bude se zdát širší podél osy x. Pokud je hodnota 1, prvek zůstane nezměněn. Pokud je hodnota větší než 0, ale menší než 1, pak je prvek komprimován.

Pokud je hodnota 0, prvek zmizí. Záporné hodnoty jsou přijatelné, ale nemění velikost prvku. Určují vodorovnou rotaci transformovaného prvku ( jako by se otáčel kolem osy y).

Příklady:

transformace: scaleX(2); /* roztáhne prvek na dvojnásobek jeho původní velikosti podél osy x */ transform: scaleX(1); /* prvek zůstane nezměněn */ transform: scaleX(0.25); /* zmenší prvek podél osy x na čtvrtinu jeho původní velikosti */ transform: scaleX(-1); /* otočí prvek podél osy x */

scaleY()

transformace: scaleY( );

Funkce CSS transformace scaleY() se používá ke zmenšení, roztažení nebo zmenšení prvku podle rozměrů osy y. Jako hodnotu bere číslo sу, které se používá ke změně velikosti prvku podél osy y.

Pokud je zadaná hodnota větší než 1, pak je prvek natažený - objeví se výše na ose y. Pokud je hodnota 1, prvek zůstane nezměněn. Pokud je hodnota větší než 0, ale menší než 1, pak je prvek komprimován. Pokud je hodnota 0 , prvek zmizí.

Záporné hodnoty jsou přijatelné, ale nemění rozměry prvku. Ve skutečnosti specifikují vertikální rotaci transformovaného prvku ( jako by se otáčel kolem osy x).

Příklady:

transformace: scaleY(2); /* roztáhne prvek na dvojnásobek původní velikosti podél osy y */ transform: scaleY(1); /* prvek zůstane nezměněn */ transform: scaleY(0.25); /* zmenší prvek podél osy y na čtvrtinu původní velikosti */ transform: scaleY(-1); /* otočí prvek podél osy y */

střídat()

transformovat: otočit(<угол>);

Funkce rotation() se používá k rotaci prvku ve dvou rozměrech. Prvek je otočen o úhel, který je předán funkci. Prvek se otočí kolem počátku, jak je definováno vlastností transform-origin.

Kladná hodnota určuje rotaci prvku ve směru hodinových ručiček. Záporná hodnota je proti směru hodinových ručiček.

Příklady:

transformace: rotace (45 stupňů); transformace: rotace(-60deg); transformovat: otáčet(1.5rad); transformovat: otáčet(1otočka);

Následující obrázek ukazuje výsledek použití kladné a poté záporné hodnoty na funkci rotace transformace CSS na obrázku. Všimněte si, jak se obrázky vzájemně překrývají, protože transformace každého z nich neovlivní tok obsahu kolem něj:

Kladná hodnota pro funkci rotation() otočí obrázek ve směru hodinových ručiček, zatímco záporná hodnota jej otočí proti směru hodinových ručiček.

překroutit()

transformovat: překroutit(<угол> [, <угол>]?);

Funkce skew() se používá ke zkosení prvku. Naklonění prvku vypadá jako použití efektu zkosení. Funkce má jeden nebo dva argumenty: ax a ay. Obojí jsou hodnoty úhlu. První hodnota ( Ó) zkosí prvek podél osy x a druhý argument ( au) — podél osy y.

Zkosení podél osy x je, jako kdybychom táhli opačné rohy v opačných směrech, a zkosení podél osy y je, jako bychom opačné rohy táhli svisle v opačných směrech (nahoru a dolů). Dvě hodnoty určují míru zkosení prvku. Pokud druhá hodnota není uvedena, předpokládá se, že je 0.

Funkce CSS transformace skew byla přítomna v dřívějších verzích specifikace. Byl z něj odstraněn, ale v některých implementacích je stále přítomen. * Nepoužívejte to*. Chcete-li zkosit prvek v libovolném směru, použijte funkce skewX() a skewY() popsané níže. Všimněte si také, že chování funkce skew() se liší od násobicích transformací skewX() a skewY() .

skewX()

transformace: skewX(<угол>);

Funkce skewX() se používá ke zkosení prvku. Naklonění prvku vypadá jako použití efektu zkosení. V případě skewX() je postup podobný, jako kdybychom uchopili dva protilehlé vrcholy obdélníku a táhli je v opačných směrech podél osy x, čímž jsme obdélník změnili na rovnoběžník.

Funkce bere jako svou hodnotu ax. Prvek je zkosený o velikost úhlu. Můžete si představit, že natáhneme dva protilehlé vrcholy obdélníku v opačných směrech, dokud vnitřní hodnota těchto úhlů nedosáhne 90 stupňů ( Ó).

Pokud je hodnota úhlu kladná, levý horní a pravý dolní roh obdélníku jsou „roztažené“. Pokud je hodnota záporná, pravý horní a levý dolní roh. Pokud je úhel 90 stupňů (nebo -90 stupňů), prvek zmizí. Hodnota 180 stupňů (nebo -180 stupňů) ji ponechá beze změny.

Příklady:

transformace: skewX(30deg); transformace: skewX(-30deg); transformace: skewX(-0.5rad); transform: skewX(-1turn); transformace: skewX(-90deg);

Obrázek níže ukazuje výsledek aplikace skewX() na obrázek s kladným a poté záporným úhlem stejné velikosti:

Výsledek aplikace skewX() na obrázek s kladným a poté záporným úhlem stejné velikosti.

Naklonění prvku také deformuje souřadnicový systém. Když je souřadnicový systém zkosený, mohou následné transformace přinést neočekávané výsledky, pokud nejsou vypočteny na základě nového souřadnicového systému. Více o souřadnicových systémech v CSS a SVG se můžete dozvědět zde.

šikmoY()

transformace: skewY( );

Funkce skewY() se používá ke zkosení prvku. Naklonění prvku vypadá jako použití efektu zkosení. V případě skewY() je postup podobný, jako kdybychom uchopili dva protilehlé vrcholy obdélníku a táhli je v opačných směrech podél osy y, čímž jsme obdélník změnili na rovnoběžník.

Transformační funkce CSS bere jako svou hodnotu ay. Prvek je zkosený o velikost úhlu. Můžete si představit, že natahujeme dva protilehlé vrcholy obdélníku v opačných směrech, dokud vnitřní hodnota těchto úhlů nedosáhne 90 stupňů - ay.

Pokud je hodnota úhlu kladná, levý horní a pravý dolní roh obdélníku jsou „roztažené“. Pokud je hodnota záporná - vpravo nahoře a vlevo dole. Pokud je úhel 90 stupňů (nebo -90 stupňů), prvek zmizí. Hodnota 180 stupňů (nebo -180 stupňů) ji ponechá beze změny.

Příklady:

transformace: skewY(30deg); transformace: skewY(-30deg); transformace: skewY(-0.5rad); transform: skewY(-1turn); transformace: skewY(-90deg);

Následující obrázek ukazuje výsledek aplikace skewY() na obrázek s kladným a poté záporným úhlem o stejné velikosti:

Výsledek aplikace skewY() na obrázek s kladným a poté záporným úhlem o stejné velikosti.

Je třeba mít na paměti, že naklánění prvku také deformuje jeho souřadnicový systém.

matice()

transformace: matice( [, ]{5,5})

Funkce matrix() se používá k určení dvourozměrné transformační matice. Lze jej použít ke spojení více transformací do jedné. Například namísto použití dvou (nebo více) konverzních funkcí (viz výše) v jedné deklaraci, jako je tato:

transform: otočit(45 stupňů) přeložit(24px,25px);

Ke spojení těchto dvou transformací do jedné matice můžete použít funkci CSStransform matrix:

Transformace: Matrix (0,7071067811865476, 0,7071067811865475, -0,707106781865475, 0,707106781865476, -0,707106781865426, 34,64823222781 40824);

Výpočet hodnot matrix3d() nebude snadný. Naštěstí Eric Meyer a Aaron Gustafson vytvořili velmi užitečný nástroj, který za vás může provést výpočty. Jediné, co musíte udělat, je zadat požadované hodnoty transformace a kliknout na červené tlačítko, aby vám nástroj vygeneroval ekvivalentní funkci matrix().

Funkce 3D konverze:

přeložitZ()

transformovat: translateZ(tz);

Funkce translateZ() se používá k posunutí prvku o zadanou vzdálenost podél osy z. Hodnota tz je uvedena v jednotkách délky ( zájem zde není povolen). Pokud nejsou jednotky specifikovány, číslo bude považováno za " vlastní jednotky«.

Kladná hodnota posune prvek podél kladného směru osy z a záporná hodnota jej posune v opačném směru.

Příklady:

transform: translateZ(300px); transform: translateZ(-5em); transform: translateZ(4vh);

translate3d()

transform: translate3d(tx , ty, tz);

Funkce translate3d() je 3D ekvivalentem funkce překladu transformace CSS. Používá se k pohybu prvku podél vektoru, kde tx je posunutí podél osy x, ty je posunutí podél osy y a tz je posunutí podél osy z. Hodnoty tx a ty jsou uvedeny v jednotkách délky nebo procentech. Hodnota tz musí být zadána v jednotkách délky a nelze ji zadat v procentech. Pokud nejsou jednotky specifikovány, číslo bude považováno za " vlastní jednotky«.

Kladné hodnoty posouvají prvek v kladném směru os a záporné hodnoty pohybují prvkem v opačném směru.

Příklady:

transform: translate3d(100px, 100px, -200px); transformace: translate3d(50%, -100%, 1em); transform: translate3d(-100px, -30px, 5vw);

scaleZ()

transform:scaleZ(<число>);

Funkce scaleZ() se používá ke změně měřítka prvku ve třetím rozměru podél osy z. Jako svou hodnotu bere bezjednotkové číslo sz, které se používá ke změně velikosti prvku v příslušném směru.

Příklady:

transformace: scaleZ(2); transformace: scaleZ(1); /* prvek zůstane nezměněn */ transform: scaleZ(0.25); transformace: scaleZ(-1);

Formálně scaleZ() změní měřítko prvku podél osy z. Ale ve skutečnosti to vypadá, jako by to bylo zmenšené ( stlačený/natažený) samotnou osu z a poté by se prvek po změně měřítka pohyboval spolu s osou.

Účinek CSS transformace scaleZ je patrnější, když máte prvek s perspektivou, který se otáčí ve 3D prostoru nebo se pohybuje podél osy z.

V prvním příkladu máme dva prvky, které se nacházejí ve 3D prostoru a jsou přesouvány podél osy z pomocí funkce translateZ(). Oba se pohybují na stejnou vzdálenost. Poté změníme měřítko druhého prvku (pravého) pomocí scaleZ(2) . Následující obrázek ukazuje výsledek aplikace transformací a také rozdíl mezi dvěma prvky po změně měřítka druhého pomocí funkce scaleZ.

Všimněte si, že druhý prvek vypadá větší, protože jeho poloha v ose Z byla zmenšena, protože samotná osa byla zmenšena. Vypadá blíže k vám, a proto je větší. Jeho skutečná šířka a výška se však nezměnily:

Výsledek aplikace stejné transformace na dva prvky, ale s tím rozdílem, že ke škálování druhého prvku byla použita funkce scaleZ().

Další příklad, ve kterém můžete jasně vidět účinek použití scaleZ. Dva prvky se nejprve transformují stejným způsobem, ale místo toho, abychom je posouvali ve 3D prostoru, rotujeme je podél osy x pomocí funkce rotationX. Druhý prvek (vpravo) byl zmenšen podél osy z pomocí funkce scaleZ(). Všimněte si, že se zdá být umístěn blíže k vám, a tedy větší:

Výsledek aplikace stejné transformace na dva prvky, ale s tím rozdílem, že pravý prvek byl také škálován pomocí funkce scaleZ().

Musíte použít transformaci CSS na tyto dva prvky ve stejném pořadí, abyste skutečně viděli efekt scaleZ. Na pořadí transformací záleží a různá pořadí transformací povedou k různým výsledkům.

scale3d()

transform:scale3d(<число>, <число>, <число>);

Funkce scale3d() je 3D analogem funkce scale(). Používá se ke stlačení nebo roztažení prvku, čímž se zvětší nebo zmenší. Funkce přijímá jako hodnoty tři čísla bez jednotek: sx, sy a sz. Kde: sx měřítko prvku podél osy x, sy měřítko prvku podél osy y a sz měřítko prvku podél osy z.

Pokud je zadaná hodnota větší než 1 , prvek se roztáhne v příslušných směrech a bude se zdát větší. Pokud je hodnota 1, zůstane nezměněna ( ve vhodných směrech). Pokud je hodnota větší než 0, ale menší než 1, pak je prvek komprimován.

Pokud je hodnota 0, prvek zmizí. Záporné hodnoty jsou povoleny, ale nemění měřítko prvku. Ve skutečnosti záporné hodnoty sx a sy otáčejí prvek podél odpovídající osy.

Příklady:

transformace: scale3d(1, 1, 1); /* prvek zůstane nezměněn */ transform: scale3d(2, 2, 2); /* prvek se objeví dvakrát větší než jeho původní velikost */ transform: scale3d(1, 2, 0); transformace: scale3d(2, 1, 3); transformace: scale3d(-1, -1, -1);

otáčet 3d()

transformace: rotace3d(<число>, <число>, <число>, <угол>);

Funkce rotation3d() je 3D ekvivalentem funkce rotace transformace CSS. Slouží k otáčení prvku v trojrozměrném prostoru. Prvek se otočí o úhel, který je předán jako čtvrtý parametr. První tři parametry určují směr rotace a společně tvoří směr vektoru, který se používá k aplikaci rotace v daném směru.

Kladná hodnota úhlu otočí prvek ve směru hodinových ručiček podél odpovídající osy a záporná hodnota jej otáčí proti směru hodinových ručiček podél této osy.

Následující obrázek ukazuje kladné směry otáčení ( ve směru hodinových ručiček) ve třech osách:

Kladný směr otáčení ve třech osách. Všimněte si, že pokud se podíváte od konce každého vektoru směrem k začátku, otáčení ve směru hodinových ručiček je znázorněno na obrázku.

První tři parametry rotace3d() označují směr vektoru, podél kterého dojde k rotaci, a úhel udává směr: ve směru hodinových ručiček podél vektoru nebo proti směru hodinových ručiček.

Příklady:

transformace: rotace3d(1, 1, 2, 45 stupňů); transformace: otočit3d(2, 1, 3, 33 stupňů); transformace: rotace3d(1, 0, 0, 45 stupňů); /* prvek je otočen ve směru hodinových ručiček kolem osy x o 45 stupňů */ transform: rotation3d(0, 1, 0, 45deg); /* prvek je otočen ve směru hodinových ručiček kolem osy y o 45 stupňů */ transform: rotation3d(0, 0, 1, 45deg); /* prvek je otočen ve směru hodinových ručiček kolem osy z o 45 stupňů */ transform: rotation3d(0, 0, 0, 50deg); /* NENÍ APLIKACE OTOČENÍ */

Následující obrázek ukazuje výsledek aplikace transformace rotation3d(1, 1, 1, 50deg) na obrázek; :

Výsledek použití transformace na obrázek rotation3d(1, 1, 1, 50deg);

otočitX()

transformace: otočitX(<угол>);

Funkce rotationX() se používá k otáčení prvku kolem osy x ve 3D prostoru. To je ekvivalentní:

transformace: otočit3d(1, 0, 0,<угол>);

kde CSS transformovat rotation3d je transformační funkce používaná k otáčení prvku ve 3D prostoru.

Funkce bere jako svou hodnotu úhel. Prvek se otočí o zadanou hodnotu kolem osy x. Pokud je hodnota kladná, otáčí se prvek ve směru hodinových ručiček, pokud je hodnota záporná, otáčí se prvek proti směru hodinových ručiček. Směr ve směru hodinových ručiček je určen pohledem na osu x od konce (kde je obvykle umístěna šipka ukazatele směru) k počátku.

Příklady:

transformace: otočitX(30 stupňů); transformace: otočitX(-135deg); transformace: otočitX(90 stupňů);

Následující obrázek ukazuje výsledek použití RotaceX (50°) a RotaceX (-50°) na obrázek:

Výsledek použití funkce rotationX(50deg) a rotationX(-50deg) na obrázek

otočitY()

transformovat: otočitY( );

Funkce otáčetY() se používá k otáčení prvku kolem osy y ve 3D prostoru. To je ekvivalentní:

transformace: otočit3d(0, 1, 0, );

Funkce bere jako hodnotu úhel. Prvek se otočí o zadanou hodnotu kolem osy y. Pokud je hodnota kladná, prvek se otáčí ve směru hodinových ručiček, pokud je záporná - proti směru hodinových ručiček

Příklady:

transformace: rotaceY(30deg); transformace: rotaceY(-135deg); transformace: otočitY(90 stupňů);

Následující obrázek ukazuje výsledek použití RotationY(50deg) a RotateY(-50deg) na obrázek:

Výsledek použití rotaceY(50deg) a rotaceY(-50deg) na obrázek

otočitZ()

transformace: otočitZ(<угол>); transformace: otočitZ(<угол>);

K rotaci prvku kolem osy z ve 3D prostoru se používá funkce CSS transformace rotationZ(). To je ekvivalentní:

transformace: otočit3d(0, 0, 1,<угол>);

kde rotace3d je transformační funkce používaná k otáčení prvku ve 3D prostoru.

Prvek se otočí o zadanou hodnotu kolem osy z. Pokud je hodnota kladná, prvek se otočí ve směru hodinových ručiček, pokud je, otočí se proti směru hodinových ručiček.

Příklady:

transformace: rotaceZ(30deg); transformace: rotaceZ(-135deg); transformace: rotaceZ(90deg);

Následující obrázek ukazuje výsledek použití RotationZ(50deg) a RotateZ(-50deg) na obrázek:

Výsledek použití funkce rotationZ(50deg) a rotationZ(-50deg) na obrázek

matrix3d()

transformace: matrix3d(<число> [, <число> ]{15,15});

Funkce matrix3d() je 3D ekvivalentem funkce matrix(). matrix3d() se používá ke spojení transformací do jediné matice a popisu sekvencí 3D transformací na síti 4 ; 4.

Například namísto použití dvou (nebo více) konverzních funkcí v jedné deklaraci, jako je tato:

transformace: otočit3d(1, 0, 1, 45 stupňů) translate3d(24px,25px, 100px);

Tyto dvě transformace můžete spojit do jedné matice pomocí funkce CSS transform matrix3d():

transform: matrix3d(0.8535533905932737, 0.499999999999999, 0.14644660940672619, 0, -0.499999999999999, 0.7071067811865476, 0.49999999999 99999, 0, 0.14644660940672619, -0.499999999999999, 0.8535533905932737, 0, 22.62994231491119, -20.3223304703363, 101.370057685 0888, 1)

perspektivní()

transformace: perspektiva(<длина>)

Technický popis:

Funkce perspective() určuje matici projekce perspektivy. Tato matice měří body v X a Y na základě jejich hodnot Z, měřítka bodů s kladnými hodnotami Z směrem od počátku a se zápornými hodnotami Z směrem k počátku.

Bod v rovině Z = 0 se nemění. Hodnota délky předaná funkci určuje vzdálenost od roviny Z = 0 k prohlížeči. Nižší hodnoty poskytují zploštělou pyramidu, a proto se efekt stává výraznějším s perspektivou. Například hodnota délky perspektivy 1000 pixelů vytváří malé změny, zatímco hodnota 200 pixelů vytváří mnohem větší změny. Hodnota hloubky musí být větší než 0, jinak je funkce neplatná:

Modrý kruh na obrázku představuje prvek ve 3D prostoru. Písmeno d představuje hodnotu perspektivy – odhadovanou vzdálenost mezi okem diváka a obrazovkou. Písmeno Z představuje polohu prvku na ose. Čím dále je prvek na ose, tím menší je ve vztahu k divákovi a čím blíže je, tím větší se jeví. Jedná se o efekt perspektivy v trojrozměrném prostoru.

Jinými slovy…

Funkce CSS transform perspective() se používá k nastavení hloubky prvku, díky čemuž se prvky výše na ose z (blíže k divákovi) zdají být větší a prvky vzdálenější se zdají menší. Čím nižší je hodnota, tím blíže je rovina z k divákovi a tím je efekt výraznější. Čím vyšší hodnota, tím dále je prvek od obrazovky a tím méně změn v perspektivě je pozorováno.

Funkce perspective() se používá k aktivaci 3D prostoru, když aplikujete 3D transformaci na prvek pomocí kterékoli z funkcí uvedených výše. Určení perspektivy je důležité, jinak bude 3D efekt vypadat plochý a 2D.

Perspektiva může být aplikována pomocí funkce perspective() nebo pomocí vlastnosti perspective. Mezi těmito dvěma metodami je velký rozdíl. Jen poznamenám, že funkce perspektiva() se vztahuje na prvek, který se transformuje ve 3D prostoru, zatímco vlastnost perspektiva se aplikuje na prvek, jehož potomci jsou transformováni ve 3D prostoru.

V tomto článku se zaměříme na použití perspective() při aplikaci transformace na prvek ve 3D prostoru, aniž by byla perspektiva nastavena na jeho kontejneru.

Pokud například chcete otočit prvek kolem osy y pomocí funkce CSS transformace rotationY(), musíte určit perspektivu, abyste vytvořili 3D prostor pro 3D transformace. Jinak bude rotace vypadat plochá a dvourozměrná. Následující obrázek ukazuje rozdíl mezi obrázkem otočeným ve 3D prostoru s perspektivou a obrázkem otočeným bez perspektivy:

Obrázek ukazuje rozdíl mezi obrázkem otočeným ve 3D prostoru s perspektivou a obrázkem otočeným bez perspektivy

Funkce perspective() bere jako parametr hodnotu délky. Čím nižší je jeho hodnota, tím blíže je rovina z k divákovi a tím je efekt patrnější. Čím vyšší hodnota, tím dále je prvek od obrazovky a tím méně patrný efekt. Následující obrázek ukazuje výsledek použití různých hodnot perspective() na prvek:

Obrázek ukazuje výsledek použití různých hodnot perspective() na prvek

Pokud máte více prvků, které se transformují ve 3D prostoru, a přesto patří do stejného kontejneru, doporučuje se použít vlastnost perspective na nadřazeném prvku spíše než používat funkci perspective() na každý jednotlivý prvek. Jinak nebude účinek očekávaný, protože funkce perspective() dává každému prvku vlastní úběžník. Použitím vlastnosti perspektiva na kontejner zajistíte, že všechny prvky v něm budou mít společný úběžník.

Poznámky

Prvek lze přesunout pomocí vlastnosti CSS position a souvisejících vlastností. Ale je lepší přesunout prvek pomocí funkce CSS transform translation, protože využívá hardwarovou akceleraci a poskytuje lepší výkon. Funkce translate3d() se také někdy používá k aplikaci hardwarové akcelerace při animaci prvků v prohlížečích WebKit. To vám umožní vytvářet plynulejší animace.

Příklady

V následujícím příkladu přesuneme a otočíme prvek a poté jej roztáhneme. Transformace jsou 2D, takže není potřeba perspektiva:

div ( /* obecné styly... */ šířka: 100px; výška: 100px; barva pozadí: #0099CC; /* transformace */ transform: translate(80px, 80px) rotovat(45deg) scale(1.5, 1.5); )

Výsledek použití výše uvedených transformací na prvek

Následující příklad je pro 3D transformaci. Prvek bude otočen kolem osy y tak, aby jeho přední strana směřovala k pravé straně obrazovky. Prvek se také pohybuje podél osy z, což způsobí jeho pohyb směrem k pravé straně obrazovky. K tomu dochází, protože poté, co byl prvek otočen kolem osy y, osa z již nesměřuje k divákovi. Pamatujte, že otočením prvku se otočí celý jeho souřadnicový systém.

Tento příklad transformačního CSS aplikuje perspektivu na prvek pomocí funkce perspective():

Element ( /* ... */ transformace: perspektiva(800px) otočeníY(90deg) translateZ(300px); )

Můžete provést stejnou transformaci, ale místo použití perspektivy na prvek můžete povolit 3D prostor na kontejneru:

Rodič ( /* ... */ perspektiva: 800px; ) .child ( /* ... */ transformace: otáčetY(90deg) translateZ(300px); )

Interaktivní demo

Kliknutím na prvek v ukázce níže uvidíte, jak se transformuje ve 3D prostoru. Transformační efekt se aplikuje po kliknutí pomocí JavaScriptu. Kliknutím na prvek více než jednou přepnete třídu .transform, která obsahuje transformace. Přechody CSS se používají k tomu, aby byl přechod hladký.

Zobrazit demo

Podpora prohlížeče

Níže je tabulka 2D podpory CSS transformace:

Podpora 2D transformací CSS3

Metoda transformace prvku, včetně rotace, změny měřítka atd., zahrnuje podporu pro vlastnost transformace CSS a také vlastnost transform-origin.

Aktuální stav: Pracovní návrh W3C

* - vyžadováno předčíslí.

Níže je tabulka podpory CSS 3D transformace:

Podpora 3D transformace CSS3

Metoda transformace prvku do tří rozměrů pomocí vlastnosti CSS transform zahrnuje podporu pro vlastnost perspective pro nastavení perspektivy z-space a vlastnost backface-visibility pro přepínání zobrazení zadní strany transformovaného prvku.

Aktuální stav: Pracovní návrh W3C

Podporováno z následujících verzí:

Stacionární					Mobilní
Chrome 12*	Firefox 10*	IE 15*	Opera 4*	Safari 3.1*	Chrome 3.2*	Firefox 3*	IE 37	Opera 54	Safari 50
Podporováno	Podporováno	Částečně	Podporováno	Podporováno	Podporováno	Podporováno	Podporováno	Podporováno	Podporováno