Funkcia otočenia v CSS: dvojrozmerná rotácia prvku

Funkcia rotate () v CSS implementuje dvojdimenzionálnu rotačnú transformáciu okolo pevného stredu nad prvkom. Blok sa tak nedeformuje a neovplyvňuje pozíciu susedných HTML kontajnerov. Metóda umožňuje určiť uhol natočenia. Okrem toho je možné nastaviť ľubovoľné rotačné centrum.

Transformácia bloku

V CSS rotate () je transformačná funkcia, takže musí byť prenesená na vlastnosti transformačného prvku.

prvok {
transformácia: rotácia (45deg);
}

Ako prvý a jediný argument je udelený uhol, ktorému bude objekt vrátený. Rotácia sa robí v dvojrozmernom priestore. Pre trojrozmerné transformácie existujú funkcie v CSS rotateX (), rotateY (), rotateZ () a rotate3d ().



Najprv obsadený prvok miesta na stránke zostáva za ním vyhradený. Vizuálny pohyb sa vyskytuje v novej vrstve bez pohybu susedných blokov.

Uhol natočenia

Uholový argument prenášaný metódou musí patriť do typu CSS. Skladá sa z číselnej hodnoty a stupňa merania (stupňa angl.).

Pozitívny uhol určuje otáčanie objektu v smere pohybu v smere hodinových ručičiek, negatívny - v opačnom smere.

Stred otáčania

V predvolenom nastavení sa rotácia bloku uskutočňuje okolo jeho geometrického stredu. Ak chcete zmeniť tento bod, použite vlastnosť transform-origin.

Podľa štandardu akceptuje tri parametre, ktoré určujú súradnice na osiach X, Y a Z. Ale keďže sa v CSS rotuje ()dvojrozmerná transformácia, postačí iba vyjadriť dve hodnoty.

prvok {
premeniť: otočiť (45deg);
transformácia-pôvod: 20px 100%;
}

Súradnice pre každú os môžu byť určené ľubovoľnou platnou jednotkou dĺžky ako percento veľkosti bloku alebo pomocou kľúčových slov top, bottom, left, right. Východiská súradníc sú umiestnené v ľavom hornom rohu obdĺžnikového kontajnera.



Súvisiace publikácie