Функцията за завъртане в CSS: двуизмерното въртене на елемент

Функцията за завъртане () в CSS изпълнява върху елемента двуизмерна трансформация на въртене около фиксиран център. Блокът не се деформира и не влияе на позицията на съседни HTML контейнери. Методът ви позволява да зададете ъгъла на завъртане. Освен това е възможно да се определи произволен център на въртене.

Преобразуване на блока

В CSS, rotate () е функция на трансформация, така че трябва да бъде предадена на свойството на трансформацията на елемента.

елемент {transform: завъртане (45deg) -}

Първият и единствен аргумент е ъгълът, при който обектът ще бъде завъртян. Завъртането се извършва в двумерно пространство. За триизмерни трансформации има функции в CSS rotateX (), rotateY (), rotateZ () и rotate3d ().

Първоначално мястото, заемано от елемента на страницата, е запазено за него. Визуалното преместване се извършва в нов слой, без да се преместват съседни блокове.

Ъгъл на въртене

Аргументът към ъгъла, преминал към метода, трябва да бъде от типа CSS . Състои се от цифрова стойност и единица мярка степен (от степента на английски език).

Положителният ъгъл определя въртенето на обекта в посока на движение по часовниковата стрелка, отрицателният ъгъл в обратната посока.

Център на въртене

По подразбиране блокът се завърта около геометричния му център. За да промените тази точка, трябва да използвате свойството transform-origin.

По принцип са необходими три параметъра, които определят координатите по осите X, Y и Z. Но тъй като завъртането () в CSS е двуизмерна трансформация, достатъчно е само да преминете две стойности.

елемент {трансформация: завъртане (45deg) - трансформация-произход: 20px 100% -}

Координатите за всяка ос могат да бъдат дефинирани във всякакви валидни дължини единици, проценти от размера на блока или с ключовите думи отгоре, отдолу, отляво, отдясно. Произходът се намира в горния ляв ъгъл на правоъгълния контейнер.

Анимация на ротация

Трансформираната собственост може да бъде динамично променена, поради което CSS ви позволява да създавате анимиране на ротация на елементите в двумерно пространство.

Ако искате да завъртите обект в отговор на конкретно действие на потребителя, например като задържите курсора на мишката върху курсора, можете да използвате прехода на собственост CSS, който определя бавна промяна в стойността на други свойства.

елемент {преход: трансформиращ 2s-} елемент: задръжте {transform: rotate (180deg) -}

Не се извършват трансформации на оригиналния елемент, но когато задържите курсора върху него, блокът ще се завърти на 180 градуса плавно за две секунди. Когато потребителят премахне курсора, ще се получи същото гладко въртене до стартовата позиция.

По-сложен начин за анимиране на обект е да се определи последователност от промени в рамката за него, като се използват свойствата на групата анимации и правилото за @keyframes.

елемент {анимация име: върти-анимация продължителност: 2s-анимация-повторение-Count: безкраен-анимация-време-функция: линейна -} @ ключови кадри въртят {от {трансформиране: завъртане (0deg) -} до {трансформиране: върти (360deg) -}}

На този елемент се прилага ротация на анимацията, която определя общото въртене от 0 до 360 градуса за две секунди. Активирането на атрибута на собственост - итерация - определя повтарянето на анимацията до безкрайност и функция за анимация - синхронизация - гладък преходен ефект. Комбинацията от имота в CSS анимация С ротационни трансформации можете да създадете красиви динамични ефекти.