Вторник25 сентября
Компьютеры

Функция rotate в CSS: двумерное вращение элемента

21 февраля 2018

Функция rotate() в CSS осуществляет над элементом двумерную трансформацию вращения вокруг неподвижного центра. Блок при этом не деформируется и не влияет на положение соседних HTML-контейнеров. Метод позволяет указать угол поворота. Кроме того, существует возможность задать произвольный центр вращения.

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

В CSS rotate() является функцией трансформации, поэтому она должна быть передана свойству transform элемента.

element {
  transform: rotate(45deg);
}

В качестве первого и единственного аргумента передается угол, на который будет повернут объект. Вращение осуществляется в двумерном пространстве. Для трехмерных трансформаций существуют функции в CSS rotateX(), rotateY(), rotateZ() и rotate3d().

Изначально занятое элементом место на странице остается за ним зарезервировано. Визуальное перемещение происходит в новом слое, не сдвигая соседние блоки.

CSS-функция rotate

Угол поворота

Аргумент угла, передаваемый методу, должен принадлежать к CSS-типу <angle>. Он состоит из числового значения и единицы измерения deg (от англ. degree - градус).

Положительный угол определяет вращение объекта по направлению движения часовой стрелки, отрицательный - в обратном направлении.

Видео по теме

Центр вращения

По умолчанию вращение блока осуществляется вокруг его геометрического центра. Для изменения этой точки необходимо воспользоваться свойством transform-origin.

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

element {
  transform: rotate(45deg);
  transform-origin: 20px 100%;
}

Координата по каждой оси может быть определена в любых валидных единицах длины, процентах от размера блока или с помощью ключевых слов top, bottom, left, right. Начало координат располагается в верхнем левом углу прямоугольного контейнера.

Изменение центра вращения в CSS

Анимация вращения

Свойство transform хорошо поддается динамическому изменению, следовательно, CSS позволяет создать анимацию вращения элемента в двумерном пространстве.

Если требуется вращать объект в ответ на определенное пользовательское действие, например наведение курсора, можно воспользоваться CSS-свойством transition, определяющим замедленное изменение значения других свойств.

element {
  transition: transform 2s;
}

element:hover {
  transform: rotate(180deg);
}

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

Более сложным способом анимации объекта является определение для него последовательности смены кадров с помощью свойств группы animation и правила @keyframes.

element {
  animation-name: rotate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotate {
  from { 
    transform: rotate(0deg); 
  }
  to {
    transform: rotate(360deg);
  }
}

К указанному элементу применяется анимация rotate, определяющая полный поворот от 0 до 360 градусов в течение двух секунд. Свойство animation-iteration-count устанавливает повторение анимации до бесконечности, а animation-timing-function - плавный эффект перехода. Сочетание свойства в CSS animation с rotate-трансформаций позволяет создавать красивые динамические эффекты.

Источник: fb.ru
Похожие материалы
Селектор first-child в CSS: выбор первого элемента Компьютеры
Селектор first-child в CSS: выбор первого элемента

Псевдокласс first-child в CSS используется для выбора первого элемента в контейнере. При этом конкретный тип элемента не учитывается, значение имеет лишь его позиция относительно родителя. Существуют некоторые тонкост...

Стилизация элемента placeholder в CSS Компьютеры
Стилизация элемента placeholder в CSS

Плейсхолдер - элемент поля ввода, в котором можно разместить подсказку. Когда пользователь начинает вводить данные, вспомогательный текст пропадает, чтобы не мешать. Каждый браузер имеет свое мнение на счет того, как ...

Функции Государства в Рыночной Экономике Бизнес
Функции Государства в Рыночной Экономике

 В рыночных условиях ведения хозяйства государственное регулирование экономической ситуации представляет собой меры контролирующего, законодательного, исполнительного характера, которые осуществляются госу...

Методы и функции управления в менеджменте Бизнес
Методы и функции управления в менеджменте

 Управление  представляет собой динамичный процесс, осуществляемый и направляемый менеджерами за счет использования различных приемов и способов. Именно из последних и образуется система  методов...

Координация как функция управления в менеджменте Бизнес
Координация как функция управления в менеджменте

Общепринято понятие менеджмента предполагает, что он представляет собой процессы по планированию и принятию различных исполнительских решений, и контроля за их выполнением. Однако существует еще одна сторона менеджмен...

Матрас в детскую кроватку: важный элемент обустройства детской комнаты Дом и семья
Матрас в детскую кроватку: важный элемент обустройства детской комнаты

Любая мама всегда заботится о том, чтобы ее чадо росло в любви и уюте, получало все самое лучшее и не чувствовало недостатка в ласке. Именно поэтому сегодня в магазинах можно найти массу детских товаров, которые помог...

Дизайн спальни в классическом стиле: основные элементы Домашний уют
Дизайн спальни в классическом стиле: основные элементы

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

Белки: в чем содержатся эти элементы? Еда и напитки
Белки: в чем содержатся эти элементы?

Продукты, которые содержат витамины и полезные вещества, необходимы для укрепления з...

Понятие и элементы иска в гражданском процессе. Значение элементов иска Закон
Понятие и элементы иска в гражданском процессе. Значение элементов иска

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

Функции государства, их понятие и классификация. Функции государства в России Закон
Функции государства, их понятие и классификация. Функции государства в России

Современное общество немыслимо без государства, которое играет значительную роль в его жизни. Вместе с обществом развиваются и все его институты, одним из которых и является государство. Это развитие является естестве...