Funkce rotace v CSS: dvojrozměrná rotace prvku

Funkce rotate () v CSS provádí na prvku dvourozměrnou transformaci rotace kolem pevného středu. Blok není deformován a nemá vliv na polohu sousedních kontejnerů HTML. Metoda umožňuje zadat úhel natočení. Navíc je možné určit libovolný střed otáčení.

Transformace bloku

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

element {transform: rotate (45deg) -}

Prvním a jediným argumentem je úhel, v němž bude objekt otočen. Otáčení se provádí ve dvourozměrném prostoru. Pro trojrozměrné transformace existují funkce v CSS rotateX (), rotateY (), rotateZ () a rotate3d ().

Zpočátku je pro něj vyhrazeno místo obsazené prvkem na stránce. Vizuální posun se vyskytuje v nové vrstvě bez přemístění přilehlých bloků.

Úhel natočení

Argument k úhlu předanému metodě musí být typu CSS . Skládá se z číselné hodnoty a stupně měření stupně (stupně angličtiny).

Pozitivní úhel určuje rotaci objektu ve směru pohybu 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í se blok otočí kolem geometrického středu. Chcete-li tento bod změnit, musíte použít vlastnost transformace původu.

Standardně se jedná o tři parametry, které určují souřadnice podél os X, Y a Z. Ale protože otočení () v CSS je dvourozměrná transformace, postačí pouze dvě hodnoty.

element {transform: otočit (45deg) -transformovat-původ: 20px 100% -}

Souřadnice pro každou osu lze definovat v libovolných platných jednotkách délky, v procentech velikosti bloku nebo v klíčových slovech horní, dolní, levý, pravý. Původ je umístěn v levém horním rohu obdélníkového kontejneru.

Animace rotace

Vlastnost transformace může být dynamicky změněna, proto CSS umožňuje vytvořit animaci rotace prvků ve dvourozměrném prostoru.

Chcete-li otočit objekt v reakci na určitou akci uživatele, například na kurzoru, můžete použít přechod vlastností CSS, který určuje pomalou změnu hodnoty jiných vlastností.

element {přechod: transformace 2s-} prvek: vznášet {transform: rotate (180deg) -}

Na původní prvek se nepoužívají žádné transformace, ale když na něj umístíte kurzor, blok se bude otáčet o dvě stupně o 180 stupňů plynule. Když uživatel odstraní kurzor, dojde ke stejnému plynulému otočení do výchozí pozice.

Složitějším způsobem animace objektu je definovat posloupnost změn rámce pro něj pomocí vlastností skupiny animace a pravidla @keyframes.

prvek {animace-název: otočení-animace-trvání: 2S-animace-iterace čítání: nekonečně animace-časování-funkce: lineární -} @ klíčové snímky otáčet {z {transformace: otočení (0deg) -} na {transformace: otočení (360deg) -}}

K tomuto prvku je použito otočení animace, která určuje celkovou rotaci od 0 do 360 stupňů po dobu dvou sekund. Animace-opakování-vlastnosti nastavuje opakování animace na nekonečno a funkce animace a časování - hladký přechodový efekt. Kombinace nemovitosti v Animace CSS Při otočení transformace můžete vytvořit krásné dynamické efekty.