Характеристики свойства
В каких браузерах работает?
| 10.0+ | 5.0+ | 12.1+ | 3.1+ | 16.0+ | 2.1+ | 2.0+ |
В каких версиях CSS используется?
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
| - | - | - | + |
Для чего используется?
Управляет превращениями указанного объекта. В комплекс преобразований входят возможности наклона, вращения или сдвига по одной из осей (вертикальной или горизонтальной). Допускается применение нескольких превращений одновременно.
Как правильно задавать?
transform:функции трансформации;
Какие могут быть значения?
- none - запрещает превращения объекта.
В качестве значений используют стандартный перечень функций трансформаций, который представлен ниже в таблице:
| Наименование функции | Пояснение ее действия | Синтаксис свойства |
| matrix | Устанавливает матрицу, согласно которой будет осуществляться превращение | transform: matrix; |
| rotate | Позволяет осуществлять поворот объекта на указанный угол, устанавливаемый через точку трансформации, которая в свою очередь указывается свойством transform-origin | transform: rotate(<угол>); |
| scale | Устанавливает масштабирование по оси абцис и ординат. Уменьшающий масштаб соответствует значению меньше единицы, а увеличивающий - соответственно, больше. | transform: scale(sx[, sy]); |
| scaleX | Масштабирование относительно оси абцис | transform: scaleX(sx); |
| scaleY | Масштабирование относительно оси ординат | transform: scaleY(sy); |
| skewX | Вертикальный наклон объекта, в соответствии с определенным значением величины угла | transform: skewX(<угол>); |
| skewY | Горизонтальный наклон объекта, в соответствии с определенным значением величины угла | transform: skewY(<угол>); |
| translate | Осуществляет сдвиг объекта во всех возможных четырех основных направлениях | transform: translate(tx[, ty]); |
| translateX | Двигает объект вдоль оси ординат на заданный интервал. При использовании значений со знаком плюс сдвиг осуществится в правую сторону, со знаком минус - в левую. | transform: translateX(tx); |
| translateY | Двигает объект вдоль оси ординат на заданный интервал. При использовании значений со знаком плюс сдвиг осуществится в правую сторону, со знаком минус - в левую. | transform: translateY(ty); |
Пример использования
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Свойство transform</title> <style> img:hover { transform: rotate(15deg); } </style> </head> <body> <img src="android.jpg"> </body> </html>
Тип CSS свойства:
Форматирование