Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов
Вы здесь

Свойство transform

Справочник: 
Свойство

Характеристики свойства

В каких браузерах работает?

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 свойства: 
Форматирование