transform
Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций, перечисляя функции трансформации через пробел.
Краткая информация
Значение по умолчанию | none |
---|---|
Наследуется | Нет |
Применяется | К трансформируемым элементам |
Анимируется | Да |
Синтаксис ?
transform: <функция> [<функция>]* | none
Обозначения
Описание | Пример | |
---|---|---|
<тип> | Указывает тип значения. | <размер> |
A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
[ ] | Группирует значения. | [ crop || cross ] |
* | Повторять ноль или больше раз. | [,<время>]* |
+ | Повторять один или больше раз. | <число>+ |
? | Указанный тип, слово или группа не является обязательным. | inset? |
{A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
# | Повторять один или больше раз через запятую. | <время># |
Значения
- <функция>
- Функция трансформации.
- none
- Отменяет действие трансформации.
Функции трансформации
matrix
Задаёт двумерную матрицу преобразований.
matrix3d
Задаёт трёхмерную матрицу преобразований.
rotate()
Поворачивает элемент в двумерном пространстве на заданный угол относительно точки трансформации, задаваемой свойством transform-origin.
rotateX()
Поворачивает элемент на заданный угол относительно оси X.
rotateY()
Поворачивает элемент на заданный угол относительно оси Y.
rotateZ()
Поворачивает элемент на заданный угол относительно оси Z.
rotate3d
Поворачивает элемент в трёхмерном пространстве.
scale()
Масштабирует элемент по горизонтали и вертикали.
scaleX()
Масштабирует элемент по горизонтали.
scaleY()
Масштабирует элемент по вертикали.
scaleZ()
Масштабирует элемент по оси Z.
scale3d
Масштабирует элемент в трёхмерном пространстве.
skew()
Наклоняет элемент на заданный угол по горизонтали и вертикали.
skewX()
Наклоняет элемент на заданный угол по горизонтали.
skewY()
Наклоняет элемент на заданный угол по вертикали.
translate()
Сдвигает элемент на заданное значение по горизонтали и вертикали.
translateX()
Сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево.
translateY()
Сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вниз, отрицательное вверх.
translateZ()
Сдвигает элемент по оси Z на указанное значение. Положительное значение сдвигает вперёд, отрицательное назад.
translate3d
Сдвигает элемент на заданное значение в трёхмерном пространстве.
perspective()
Задаёт перспективу.
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transform</title>
<style>
.turn:hover {
transform: rotate(15deg);
}
</style>
</head>
<body>
<p><img src="image/igels.png" alt="Ёжик" class="turn">
<img src="image/igels.png" alt="Ёжик" class="turn"></p>
</body>
</html>
В данном примере при наведении курсора на изображение оно поворачивается на 15 градусов по часовой стрелке.
Объектная модель
Объект.style.transform
Примечание
Internet Explorer 9 поддерживает свойство -ms-transform.
Chrome до версии 36, Safari до версии 9, Opera до версии 23 и Android поддерживают свойство -webkit-transform.
Opera до версии 12.1 и с версии 15 до 23 поддерживает свойство -o-transform.
Firefox до версии 16 поддерживает свойство -moz-transform.
Спецификация ?
Спецификация | Статус |
---|---|
CSS Transforms Module Level 1 | Рабочий проект |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры ?
9 | 10 | 12 | 5 | 36 | 11.5 | 12.1 | 15 | 23 | 4 | 9 | 3.5 | 16 |
2.1 | 3.5 | 16 | 12 | 4 | 9.2 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
См. также
Практика
- Масштабирование картинки при наведении
- Масштабирование картинки при наведении 2
- Масштабирование кнопки
- Наклон картинки
- Отражение картинки
- Отражение по вертикали
- Отражение по горизонтали
- Перспектива
- Поворот на -90°
- Поворот на 360° при наведении
- Поворот на 90°
- Сдвиг при наведении
- Сдвигаем вверх
- Сдвигаем вниз
- Точка трансформации