2.20. CSS3-трансформации

css3-transformCSS3-трансформации изменяют размер, форму и положение элемента на веб-странице с помощью свойства transform. Трансформации преобразовывают элемент, не затрагивая остальные элементы веб-страницы, т.е. другие элементы не сдвигаются относительно него. По умолчанию трансформация происходит относительно центра элемента.

К элементам, которые могут быть трансформированы, относятся элементы с display: block; и display: inline-block;, а также элементы, значение свойства display которых вычисляется как table-row, table-row-group, table-header-group, table-footer-group, table-cell или table-caption. Трансформированным считается элемент с любым установленным значением свойства transform, отличным от none.

Существуют два вида CSS3-трансформаций – 2D и 3D. 2D-трансформации преобразовывают элементы в двухмерном пространстве.

2D-трансформации элементов

Поддержка браузерами

IE: 10.0, 9.0 -ms-
Edge: 12.0
Firefox: 16.0, 3.5 -moz-
Chrome: 36.0, 4.0 -webkit-
Safari: 9.0, 3.1 -webkit-
Opera: 23.0, 15.0 -webkit-
iOS Safari: 9, 7.1 -webkit-
Android Browser: 53, 2.1 -webkit-
Chrome for Android: -webkit-

1. Функции 2D-трансформации transform

Свойство задаёт вид преобразования элемента. Свойство описывается с помощью функций трансформации, которые смещают элемент относительно его текущего положения на странице или изменяют его первоначальные размеры и форму. Не наследуется.

Допустимые значения:

matrix() — любое число
translate(), translateX(), translateY() — единицы длины (положительные и отрицательные), %
scale(), scaleX(), scaleY() — любое число
rotate() — угол (deg, grad, rad или turn)
skew(), skewX(), skewY() — угол (deg, grad, rad)

Функция Описание
none Значение по умолчанию, означает отсутствие трансформации. Также отменяет трансформацию для элемента из группы трансформируемых элементов.
matrix(a, c, b, d, x, y) Смещает элементы и задает способ их трансформации, позволяя объединить несколько функций 2D-трансформаций в одной. В качестве трансформации допустимы поворот, масштабирование, наклон и изменение положения.
Значение a изменяет масштаб по горизонтали. Значение от 0 до 1 уменьшает элемент, больше 1 — увеличивает.
Значение c деформирует (сдвигает) стороны элемента по оси Y, положительное значение — вверх, отрицательное — вниз.
Значение b деформирует (сдвигает) стороны элемента по оси X, положительное значение — влево, отрицательное — вправо.
Значение d изменяет масштаб по вертикали. Значение меньше 1 уменьшает элемент, больше 1 — увеличивает.
Значение x смещает элемент по оси X, положительное — вправо, отрицательное — влево.
Значение y смещает элемент по оси Y, положительное значение — вниз, отрицательное — вверх.
translate(x,y) Сдвигает элемент на новое место, перемещая относительно обычного положения вправо и вниз, используя координаты x и y, не затрагивая при этом соседние элементы. Если нужно сдвинуть элемент влево или вверх, то нужно использовать отрицательные значения.
translateX(n) Сдвигает элемент относительно его обычного положения по оси X.
translateY(n) Сдвигает элемент относительно его обычного положения по оси Y.
scale(x,y) Масштабирует элементы, делая их больше или меньше. Значения от 0 до 1 уменьшают элемент. Первое значение масштабирует элемент по ширине, второе — по высоте. Отрицательные значения отображают элемент зеркально.
scaleX(n) Функция масштабирует элемент по ширине, делая его шире или уже. Если значение больше единицы, элемент становится шире, если значение находится между единицей и нулем, элемент становится уже. Отрицательные значения отображают элемент зеркально по горизонтали.
scaleY(n) Функция масштабирует элемент по высоте, делая его выше или ниже. Если значение больше единицы, элемент становится ниже, если значение находится между единицей и нулем — ниже. Отрицательные значения отображают элемент зеркально по вертикали.
rotate(угол) Поворачивает элементы на заданное количество градусов, отрицательные значения от -1deg до -360deg поворачивают элемент против часовой стрелки, положительные — по часовой стрелке. Значение rotate(720deg) поворачивает элемент на два полных оборота.
skew(x-угол,y-угол) Используется для деформирования (искажения) сторон элемента относительно координатных осей. Если указано одно значение, второе будет определено браузером автоматически.
skewX(угол) Деформирует стороны элемента относительно оси X.
skewY(угол) Деформирует стороны элемента относительно оси Y.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg); 
transform: rotate(360deg);
}

Наведите курсор мыши на блоки, чтобы посмотреть функции трансформации в действии.

See the Pen EaNbLX by HeleN (@nazarelen) on CodePen.

2. Точка трансформации transform-origin

Свойство позволяет сместить центр трансформации, относительно которого происходит изменение положения/размера/формы элемента. Значение по умолчанию — center, или 50% 50%. Задаётся только для трансформированных элементов. Не наследуется.

transform-origin
Значения:
ось Х(left, center, right, длина, %)
ось Y(top, center, bottom, длина, %)
Пара значений, заданная с помощью ключевых слов, единиц длины или процентов определяет, относительно какой части элемента будет происходить трансформация. Значения больше 100% увеличивают область трансформации элемента.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {
-webkit-transform: rotate(45deg); 
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 20% 40%; 
-ms-transform-origin: 20% 40%; 
transform-origin: 20% 40%;
}

See the Pen aNQNva by Elena Nazarova (@nazarelen) on CodePen.

3. Множественные трансформации

Можно объединить несколько трансформаций одного элемента, перечислив их через пробел в порядке проявления.

div {transform: scale(1.5) rotate(-10deg);}

4. Трансформации на практике: как сделать ленточки

See the Pen BKGZPP by Elena Nazarova (@nazarelen) on CodePen.

Возможно, вас также заинтересует

  • Создание Сайтов

    Не нашел ничего о многоуровневых горизонтальных и вертикальных меню css3

    • Готовлю уроки к публикации. Следите за обновлениями на сайте. Удачи!

  • Виктор Паланский

    Подскажите, смотрю с хрома на ваш пример, вижу между стрелочками ribbon1 и 3 (1 и 3 картинка) есть зазор в 1px как это убрать более грамотно? и почему так происходит? это баг или спецификация?

  • Виктор Паланский

    в хроме есть зазор 1px на примере css ленточки на 1 и 3 картинке на ленточках между стрелкой, что это баг или особенности спецификации? и как с этим бороться грамотно?

    • Посмотрите сейчас.

      • Виктор Паланский

        да решилась, как вы это сделали?:)

        • После вашего вопроса я просмотрела кодепен — во всех браузерах, кроме IE, этой проблемы не наблюдалось. Правда, при увеличении масштаба эти полоски начали появляться.
          На самом деле решение несколько странное, но это сработало: я использовала дробные значения величины смещения, например, top: -6.1px.

          • Виктор Паланский

            у меня в хроме данное наблюдается, я тоже экспериментировал с позиционирование проблема решалась, если появятся еще какие-нибудь интересные решения или объяснения данного поведения будет интересно услышать. спасибо !

          • Пожалуйста! Мне самой было бы интересно узнать причину данного поведения. Единственное, что можно сказать, эта проблема образуется в месте соединения с псевдоэлементом.

  • Спасибо! То что нужно!

  • Очень люблю ваши материалы, шикарное изложение информации как и оформление впрочем)
    Добавьте в статью свойства rotateX(*deg) и rotateY(*deg)

    • Спасибо! Веб-технологии — моя страсть :-))
      На данный момент эти варианты для 2D-трансформаций не работают корректно, поэтому я их исключила из перечня функций.

      • Хотел еще спросить: как применить эти свойства для элементов при прокрутке страницы(тип для вылетающих блоков и тд)?

        • Не совсем поняла ваш вопрос, но все эффекты, что делаются при прокрутке, завязаны на скрипте.

          • Извините, видимо некоректно задал вопрос. Например при наведении на блок мышью — он сдвигается, мы это делаем при помощи :hover, а как сделать такой же эфект, только не при наведении, а чтоб блок сдвигался, когда пользователь дойдет до него при скролинге страници. Что-то наподобии вылетающих слева или справа блоков на лендингах

          • Посмотрите в этой https://html5book.ru/forum/threads/vsplyvanie-blokov-pri-prokrutke.9/ теме , может что-то подойдёт.

          • по событию scroll выполнять естественно