Урок с практикой по CSS (Онлайн курсы)
Выбрать другой урок из курса
Обсуждение
Теория урока

Трансформирование элементов при помощи CSS

Введение

CSS3 открыл новые возможности. Сейчас научимся трансформировать элементы, то есть будем вращать, сдвигать и наклонять элементы. Эту возможность открывает свойство transform. Значением свойства transform является функция. Вот их список и принимаемые ими значения:

  1. matrix() — любое число;
  2. scale(), scaleX(), scaleY() — любое число;
  3. rotate() — угол (deg, grad, rad);
  4. skew(), skewX(), skewY() — угол (deg, grad, rad);
  5. translate(), translateX(), translateY() — единицы длины и проценты.

Пример применения свойства transform:

Код CSS
transform: scaleX(0.5);

Если необходимо использовать сразу несколько функций, то следует перечислять их через пробел:

Код CSS
transform: scaleX(0.5) rotate(20deg);

Функция matrix

Функция matrix является комбинированной. Она имеет 6 значений: matrix(a, b, c, d, x, y).

  1. Значение a: масштаб по горизонтали (если a > 1, то увеличение, иначе уменьшение);
  2. Значение b: наклоняет стороны элемента по оси Y (если b > 0, то вверх, иначе вниз);
  3. Значение c: наклоняет стороны элемента по оси X (если c > 0, то влево, иначе вправо);
  4. Значение d: масштаб по вертикали (если d > 1, то увеличение, иначе уменьшение);
  5. Значение x: смещает элемент по оси X (если x > 0, то вправо, иначе влево);
  6. Значение y: смещает элемент по оси Y (если y > 0, то вниз, иначе вверх).

Функция translate

Функции translate(), translateX(), translateY() принимают различные значения длины и проценты. Результатом ее работы является сдвиг элемента относительно обычного положения. Для функции translate() задается два значения, первое – сдвиг по оси X, второе – по Y.

Код CSS
.link:hover {
transform: translateY(-10px);
}

Функция scale

Функции scale(), scaleX(), scaleY() принимают любые числа (без единиц измерения). Числа от 0 до 1 уменьшают элемент, больше единицы – увеличивают. Для функции scale() первое значение изменяет элемент по ширине, второе по высоте. Значения записываются через запятую. Отрицательные значения отображают элемент зеркально.

Код CSS
.link:hover {
transform: scaleX(-1);
}

Функция rotate

Функция rotate поворачивает элемент на заданный угол, который может быть как положительным, так и отрицательным. Допускается указывать угол больше 360 градусов.

Код CSS
.link:hover {
transform: rotate(360deg);
}

Функция skew

Функции skew(), skewX(), skewY() деформируют стороны элемента. Деформация осуществляется относительно осей координат. Для функции skew() первым значением задается угол по оси X, вторым – по оси Y. Если задан только первый угол, то второй будет определен автоматически.

Точка трансформации

Иногда требуется сместить точку, относительно которой происходит трансформация. По умолчанию этой точкой является центр элемента. Чтобы сместить точку трансформации, добавили свойство transform-origin, которое принимает три значения через пробел:

Код CSS
transform-origin: x y z;

Где буквы означают координаты по одноименным осям. Далее пример:

Код CSS
transform-origin: 0 50%;

Заключение

Мы познакомились с новыми возможностями CSS3, которые упрощают разработку современного дизайна. Не забывайте использовать вендорные префиксы, которые здесь не упоминались (о них упоминалось ранее). Они нужны для корректной работы свойств во всех браузерах.

<
×
>
Не публикуйте свой код прямо в комментариях. Во-первых, он плохо отображается. Во-вторых, он может содержать для кого-то «спойлеры», т.е. ответы на практику. Воспользуйтесь специальными сервисами: cssdeck.com или jsfiddle.net.
Комментарии, содержащие код (пару строк не считается), будут безжалостно удаляться.