Суббота21 июля
Компьютеры

Функция 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
Комментарии
Ваше имя:
Комментарий:
Введите символы: *
captcha
Обновить

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

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

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

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

Поддон картера двигателя: ремонт Автомобили
Поддон картера двигателя: ремонт

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

Шины на УАЗ: выбор, описание, характеристики Автомобили
Шины на УАЗ: выбор, описание, характеристики

Надёжные и практичные автомобили УАЗ пользуются популярностью в нашей стране. Модельный ряд достаточно широкий. Сами автомобили весьма неприхотливые и имеют большие возможности в плане проходимости и движения на внедо...

Видеорегистратор с выносной камерой: обзор моделей, описание, характеристики, установка Автомобили
Видеорегистратор с выносной камерой: обзор моделей, описание, характеристики, установка

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

Обновленный Автомобили
Обновленный "Рено Дастер", или большие надежды французского производителя

Обновленный "Рено Дастер" (2014 год стал для машины успешным), несмотря на недолгий период пребывания на мировом автомобильном рынке, завоевал огромную популярность. Подтверждением этому является выпуск миллионного эк...

Основные функции СУБД Бизнес
Основные функции СУБД

Современные системы управления базами данных применяются на многих объектах, но при этом далеко не все знают, что они собой представляют и как можно использовать функции СУБД. Такие инструменты отличаются огромным кол...

Что такое фюзеляж самолета? Схема, устройство, элементы конструкции Бизнес
Что такое фюзеляж самолета? Схема, устройство, элементы конструкции

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

Международная торговля - это что? Определение, функции и виды Бизнес
Международная торговля - это что? Определение, функции и виды

Человеческое общество немыслимо без международной или мировой торговли. Она исторически является первой формой экономических связей разных стран. В данном плане международная торговля – это торговые поселения и ...

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

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