CSS
2D-преобразования

Синтаксис

• Повернуть преобразование
• transform: rotate (<angle>)
• Преобразование перевода
• transform: translate (<length-or-percent> [, <length-or-percent>]?)
• transform: translateX (<длина или процент)>
• transform: translateY (<длина или процент)>
• Косовое преобразование
• transform: skew (<angle> [, <angle>]?)
• transform: skewX (<angle>)
• transform: skewY (<angle>)
• Трансформация шкалы
• transform: масштаб (<масштабный коэффициент> [, <масштаб-фактор>]?)
• transform: scaleX (<масштаб-фактор>)
• transform: scaleY (<масштаб-фактор>)
• Матричное преобразование
• transform: matrix (<number> [, <number>] {5,5})

параметры

замечания

-webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
        transform: rotate(45deg);

Поворот

HTML

<div class="rotate"></div>

CSS

.rotate {
    width: 100px;
    height: 100px;
    background: teal;
    transform: rotate(45deg);
}

Этот пример повернет div на 45 градусов по часовой стрелке. Центр вращения находится в центре div, 50% слева и 50% сверху. Вы можете изменить центр вращения, установив свойство transform-origin .

transform-origin: 100% 50%;

Вышеприведенный пример установит центр вращения в середину правого бокового конца.

Масштаб

HTML

<div class="scale"></div>

CSS

.scale {
    width: 100px;
    height: 100px;
    background: teal;
    transform: scale(0.5, 1.3);
}

Этот пример будет масштабировать div до 100px * 0.5 = 50px по оси X и до 100px * 1.3 = 130px по оси Y.

Центр преобразования находится в центре div, 50% слева и 50% сверху.

Переведите

HTML

<div class="translate"></div>

CSS

.translate {
    width: 100px;
    height: 100px;
    background: teal;
    transform: translate(200px, 50%);
}

Этот пример переместит div на 200px по оси X и на 100px * 50% = 50px по оси Y.

Вы также можете указать переводы на одной оси.

На оси X:

.translate {
    transform: translateX(200px);
}

На оси Y:

.translate {
    transform: translateY(50%);
}

скос

HTML

<div class="skew"></div>

CSS

.skew {
    width: 100px;
    height: 100px;
    background: teal;
    transform: skew(20deg, -30deg);
}

Этот пример будет искажать div на 20 градусов по оси X и на 30 градусов по оси Y.
Центр преобразования находится в центре div, 50% слева и 50% сверху.

См. Результат здесь .

Несколько преобразований

Множественные преобразования могут быть применены к элементу в одном свойстве:

transform: rotate(15deg) translateX(200px);

Это повернет элемент на 15 градусов по часовой стрелке, а затем переведёт его на 200 пикселей вправо.

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

Изменение порядка преобразований изменит выход. Первый пример будет отличаться от

transform: translateX(200px) rotate(15deg);

<div class="transform"></div>

.transform {
  transform: rotate(15deg) translateX(200px);
}

Как показано на этом изображении:

Трансформация происхождения

Преобразования выполняются относительно точки, которая определяется свойством transform-origin .

Свойство принимает 2 значения: transform-origin: XY;

В следующем примере первый div ( .tl ) вращается вокруг верхнего левого угла с transform-origin: 0 0; и второй ( .tr ) преобразуется вокруг его верхнего правого угла с transform-origin: 100% 0 . Вращение применяется при наведении :

HTML:

<div class="transform originl"></div>
<div class="transform origin2"></div>

CSS:

.transform {
    display: inline-block;
    width: 200px;
    height: 100px;
    background: teal;
    transition: transform 1s;
}

.origin1 {
    transform-origin: 0 0;
}

.origin2 {
    transform-origin: 100% 0;
}

.transform:hover {
    transform: rotate(30deg);
}

Значение по умолчанию для свойства transform-origin составляет 50% 50% которое является центром элемента.