Анимация в CSS

Трансформации

Начало координат (свойство transform-origin)

CSS свойство transform-origin устанавливает координаты точки, относительно которой будет происходить трансформация элемента.

Синтаксис:

transform-origin: x y z

x y z - координаты по одноименным осям.

Возможные значения - <длина> | <проценты> | left | center | right

Здесь <длина> — любая единица измерения CSS.

Преобразования (свойство transform)

CSS свойство transform трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды преобразований.

Синтаксис:

transform: <функция> [<функция>]* | none

Функции трансформации:

Rotate

Поворот элемента (вместе с его системой координат) на заданный угол относительно точки трансформации, задаваемой свойством transform-origin.

transform: rotate(<угол>)

scale

Масштаб элемента по X- и Y- осям координат.

Значение больше 1 увеличивает масштаб элемента, меньше 1 — уменьшает масштаб.

transform: scale(sx[, sy]);

skew

Наклоняет одну из осей координат элемента заданный угол.

Задавая угол-X, мы сдвигаем все х-координаты на определенный угол (при этом фактически происходит поворт Y-оси элемента на этот угол-x),оставляя у-координаты без изменения.

Задавая угол-Y, мы сдвигаем все x-координаты на определенный угол (при этом фактически происходит поворт X-оси элемента на этот угол-y), оставляя x-координаты без изменения.

transform: skew(<угол-X>,<угол-Y>)

Сдвигает элемент на заданное значение по оси X и оси Y.

transform: translate(tx[, ty])

Matrix

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

Пример 1: повернем ось Y на 20 градусов, а затем сдвинем елемент вдоль нее на 100px. Демонстрация процесса на Рис. ниже - левая часть.

transform: skew(20deg,0deg) translate(1,100px)

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

Пример 2: повернем ось X на 20 градусов, а затем снова сдвинем елемент вдоль оси Y на 100px. Демонстрация процесса на Рис. ниже - правая часть.

transform: skew(20deg,0deg) translate(1,100px)