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

Трансформацията на блока

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

елемент {
трансформира: завъртане (45deg);
}

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

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

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

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

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

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

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

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

елемент {
 трансформира: върти (45deg);
начало на преобразуване: 20px 100%; 
}

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