164. Трансформирование элементов при помощи 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:

transform: scaleX(0.5);

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

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.

.link:hover {
    transform: translateY(-10px);
}

Функция scale

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

.link:hover {
    transform: scaleX(-1);
}

Функция rotate

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

.link:hover {
    transform: rotate(360deg);
}

Функция skew

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

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

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

transform-origin: x y z;

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

transform-origin: 0 50%;

Заключение

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

Похожие уроки и записи блога

1. Используя функцию scaleX(), сделайте, чтобы элемент при наведении на него мыши увеличивался по длине на 1.1. Помните, что функции перечисляются через пробел в свойстве transform.
2. Используя функцию scaleY(), сделайте, чтобы элемент при наведении на него мыши уменьшался по высоте на 0.9.

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить на любом популярном форуме в интернете.