Что такое CSS rotate()? — Темы Scaler
Что такое CSS rotate()?
Что такое CSS rotate()?
share-outline Курс Javascript — Освоение основ Мринал Бхаттачарья Бесплатно star 4.8 Зачислено: 1000 9000 9 Курс Javascript — Освоение основ Мринал Бхаттачарья Бесплатно Начать обучениеCSS rotate — это встроенная функция, которая используется для поворота элемента на определенный градус в 2D-плоскости без изменения формы фигуры.
Мы можем вращать элемент как по часовой, так и против часовой стрелки.
В функции поворота CSS входной угол может быть указан в градусах, градах, радианах или поворотах, и он возвращает выходные данные в форме данных типа
Синтаксис
Значения
none
Значение none используется, когда мы не хотим поворачивать элемент.
Пример:
Подобно значению none, мы также можем использовать глобальные значения.
Когда мы используем значения углов, мы можем выразить их в градусах, градианах, радианах или оборотах.
Имя оси со значением
<угла>Мы можем написать имя оси вместе со значением угла, это приведет к вращению элемента вдоль заданной оси с заданным углом.
Вектор плюс значение угла
Мы можем задать значение вектора вместе с углом поворота.
Единицы
Когда мы используем значения угла для определения свойства поворота, мы можем выразить их в градусах, градианах, радианах или поворотах.
град
Пример:
град
Пример:
поворот
Пример: 900 05
рад
Пример:
Переходы и анимации
Когда мы хотим увидеть ‘ повернуть элемент» в действии или в форме анимации, мы должны использовать свойство перехода.
Переходы изменяют состояние элемента и позволяют плавно изменять значения свойств в течение заданного времени. Например, его можно использовать, когда курсор находится над элементом.
Пример:
Вывод:
Перед переходом:
После перехода:
Когда использовать функцию CSS Transform rotate()?
Мы можем использовать приведенный ниже синтаксис для использования функции поворота.
Основное различие между использованием свойства поворота и использованием функции поворота с преобразованием заключается в том, что при использовании свойства поворота без функции преобразования мы также можем вращать элемент, используя ось Z. Следовательно, чаще используется свойство rotate.
Примеры
Базовый пример
Результат:
Комбинирование поворота с другим преобразованием
Мы можем комбинировать свойство поворота с другими свойствами преобразования, такими как наклон и масштаб.
В приведенном ниже примере мы использовали масштабирование и поворот вместе, чтобы повернуть элемент на 45 градусов и масштабировать его в 1,5 раза по оси Y.
Вывод:
Перед преобразованием:
После преобразования:
Поддержка браузера
Следующие браузеры полностью поддерживают свойство CSS rotate:
Заключение
- CSS rotate — это встроенная функция, которая используется для поворота элемента на определенный градус.
- Входной угол может быть указан в градусах, градах, радианах или поворотах вместе с осью, вокруг которой мы хотим повернуться.
- Свойство CSS rotate также можно использовать с другими свойствами преобразования, такими как наклон и масштаб.
rotate — CSS 3 Files
Используется для поворота элементов.
Совместимость
-webkit-transform: поворот Safari 5+, Chrome 10+ iOS 3.
2+ Android 2.1+ Blackberry 7+
-ms-transform: поворот Internet Exlorer 9+
transform: поворот Firefox 16+ Inernet Explorer 10+ Opera 12.1+ IE Mobile 10+
Не поддерживается Opera Mini. Подробную информацию о совместимости см. на сайте caniuse.com.
Firefox 16+Safari 5+, Chrome 10+Internet Explorer 9+Internet Explorer 10+Opera 12.1+
iOS 3.2+Android 2.1+Blackberry 7+IE Mobile 10+
Общее описание
Начало поворота находится в центре элемента. Чтобы изменить источник, см. Transform-origin. Можно комбинировать несколько трансформаций.
transform: rotate(1 30deg)
1 Элемент поворачивается по часовой стрелке на 30 градусов. Отрицательные значения приводят к вращению против часовой стрелки.
Пример
Элемент повернут против часовой стрелки
преобразование: поворот (1 -40 градусов)
1 Элемент поворачивается против часовой стрелки на 40 градусов.
Дополнительная литература
Для получения дополнительной информации посетите сайт W3C, сайт Safari и сайт MDN (включая информацию о совместимости для более старых версий браузера).
Используется для масштабирования элементов.
Совместимость
-webkit-transform: масштабирование Safari 5+, Chrome 10+ iOS 3.2+ Android 2.1+ Blackberry 7+
-ms-transform: масштабирование Internet Exlorer 9+
transform: масштабирование Firefox 16+ Firefox 16+ Opera 12.1 + Мобильный IE 10+
Не поддерживается Opera Mini. Подробную информацию о совместимости см. на сайте caniuse.com.
Firefox 16+Safari 5+, Chrome 10+Internet Explorer 9+Internet Explorer 10+Opera 12.1+
iOS 3.2+Android 2.1+Blackberry 7+IE Mobile 10+
Общее описание
Комбинированное обозначение 900 45
начало преобразования находится в центре элемента. Чтобы изменить источник, см. Transform-origin. Можно комбинировать несколько трансформаций.
преобразование: масштаб (1 2, 2 1,5)
- Масштабный коэффициент, где 1 соответствует исходному размеру, 2 — удвоенному размеру и т. д. Элемент масштабируется по горизонтали (ось X) и по вертикали (ось Y) с одинаковым коэффициентом.
Отрицательные значения отражают элемент. - Дополнительно. Коэффициент вертикального масштаба. Если дан коэффициент, отмеченный цифрой 1, он обозначает горизонтальное изменение. В этом случае элемент масштабируется в 2 раза по горизонтали и в 1,5 раза по вертикали.
Отрицательные значения отражают элемент.Масштаб по горизонтали
преобразование: масштабX(1 2)
1 Коэффициент масштабирования по горизонтали.
Масштаб по вертикали
transform: scaleY(1 1.5)
1 Коэффициент масштабирования по вертикали.
Дополнительная литература
Для получения дополнительной информации посетите сайт W3C, сайт Safari и сайт MDN (включая информацию о совместимости для более старых версий браузера).
Используется для наклона элементов.
Совместимость
-webkit-transform: skew Safari 5+, Chrome 10+ iOS 3.2+ Android 2.1+ Blackberry 7+
-ms-transform: skew Internet Explorer 9+
transform: skew Firefox 16+ Firefox 16+ Opera 12.
1+ IE Mobile 10+
Не поддерживается Opera Mini. Подробную информацию о совместимости см. на сайте caniuse.com.
Firefox 16+Safari 5+, Chrome 10+Internet Explorer 9+Internet Explorer 10+Opera 12.1+
iOS 3.2+Android 2.1+Blackberry 7+IE Mobile 10+
Общее описание
Комбинированное обозначение 900 45
начало преобразования находится в центре элемента. Чтобы изменить источник, см. Transform-origin. Можно комбинировать несколько трансформаций.
преобразование: наклон(1 30 градусов, 2 10 градусов)
- Элемент наклонен вокруг оси x (горизонтально) на 30 градусов. Положительные значения представляют наклон влево, отрицательные значения наклоняют элемент вправо.
- Дополнительно. Угол наклона вокруг оси Y (по вертикали). Если задано значение 1, это угол наклона вокруг оси x. Положительные значения наклоняют элемент вниз, отрицательные значения представляют собой наклон вверх. В этом случае элемент наклоняется на 30 градусов по горизонтали (влево) и на 10 градусов по вертикали (вниз).
Горизонтальный наклон
преобразование: наклонX(1 30 градусов)
1 Угол наклона вокруг оси x (по горизонтали).
Вертикальный наклон
преобразование: skewY(1 10deg)
1 Угол наклона вокруг оси Y (по вертикали).
Дополнительная литература
Для получения дополнительной информации посетите сайт W3C, сайт Safari и сайт MDN (включая информацию о совместимости для более старых версий браузера).
Используется для перемещения элементов. Также может быть достигнуто путем установки поля или позиционирования элемента, хотя перевод является лучшим выбором для анимации элементов.
Совместимость
-webkit-transform: перевести Safari 5+, Chrome 10+ iOS 3.2+ Android 2.1+ Blackberry 7+
-ms-transform: перевести Internet Exlorer 9+
transform: перевести Firefox 16+ Firefox 16+ Opera 12.1 + IE Mobile 10+
Не поддерживается Opera Mini. Подробную информацию о совместимости см.
на сайте caniuse.com.
Firefox 16+Safari 5+, Chrome 10+Internet Explorer 9+Internet Explorer 10+Opera 12.1+
iOS 3.2+Android 2.1+Blackberry 7+IE Mobile 10+
Общее описание
Комбинированное обозначение
Начало преобразования находится в центре элемента. Чтобы изменить источник, см. Transform-origin. Можно комбинировать несколько трансформаций.
transform: translate(1 100px, 2 20px)
- Элемент перемещается на 100px вправо. Отрицательные значения представляют сдвиг влево.
- Дополнительно. Вертикальный сдвиг. Если задано значение 1, это означает горизонтальное движение. Положительные значения перемещают элементы вниз, отрицательные — вверх. В этом случае элемент перемещается на 100 пикселей вправо и на 20 пикселей вниз.
Горизонтальный сдвиг
transform: translateX(1 100px)
1 Значение горизонтального сдвига.
Вертикальный сдвиг
transform: translateY(1 20px)
1 Значение вертикального сдвига.
Пример
Сочетание нескольких преобразований
преобразование: поворот (1 33 градуса) масштабирование (2 1,5)
- Элемент поворачивается по часовой стрелке на 33 градуса.
- Одновременно увеличивается в 1,5 раза (без запятой!).
Дальнейшее чтение
Для получения дополнительной информации см. сайт W3C, сайт Safari и сайт MDN (включая информацию о совместимости для более старых версий браузера).
Устанавливает начало преобразования элемента.
Совместимость
-webkit-transform-origin Safari 5+, Chrome 10+ iOS 3.2+ Android 2.1+ Blackberry 7+
-ms-transform-origin Internet Exlorer 9+
transform-origin Firefox 16+ Firefox 16+ Opera 12.1 + IE Mobile 10+
Не поддерживается Opera Mini. Подробную информацию о совместимости см. на сайте caniuse.com.
Firefox 16+Safari 5+, Chrome 10+Internet Explorer 9+Internet Explorer 10+Opera 12.1+
iOS 3.2+Android 2.1+Blackberry 7+IE Mobile 10+
Общее описание
transform-origin: 1 left 2 top
- Горизонтальное положение начала координат для преобразований (ось X).
