CSS3-трансформации
#1 Основная инфо
- Для чего?
- позволяет сдвигать, поворачивать и масштабировать элементы. Трансформации преобразовывают элемент, не затрагивая остальные элементы веб-страницы, т.е. другие элементы не сдвигаются относительно него.
- Свойство transform
- задаёт вид преобразования элемента. Свойство описывается с помощью функций трансформации, которые смещают элемент относительно его текущего положения на странице или изменяют его первоначальные размеры и форму.
- Свойство transform-origin
- позволяет сместить центр трансформации, относительно которого происходит изменение положения/размера/формы элемента. Значение по умолчанию — center, или 50% 50%. Задаётся только для трансформированных элементов.
- Элементы которые могут быть трансформированы:
-
- display: block;
- display: inline-block;
- display: table-row;
- display: table-row-group;
- display: table-header-group;
- display: table-footer-group;
- display: table-cell;
- display: table-caption;
#2 Виды CSS3-трансформаций
- 2D-трансформации
- преобразовывают элементы в двумерном пространстве c помощью 2D-матрицы преобразований. Эта матрица применяется для вычисления новых координат объекта, на основе значений свойств transform и transform-origin. Преобразования влияют только на визуальный рендеринг. В отношении макета страницы они могут отразиться на переполнении содержимого блока. По умолчанию точка трансформации находится в центре элемента.
- 3D-трансформации
- расширяет спецификацию CSS 2D Transforms, позволяя преобразовывать элементы в трехмерном пространстве. Новые функции преобразования для свойства transform выполняют трехмерные преобразования, расширяя координатное пространство до трех измерений, добавляя ось Z, перпендикулярную плоскости экрана, которая увеличивается по направлению к зрителю, а дополнительные свойства позволяют контролировать взаимодействие вложенных трехмерных преобразованных элементов.
#3 2D-трансформации, возможные значения
- transform: none
- значение по умолчанию, означает отсутствие трансформации. Также отменяет трансформацию для элемента из группы трансформируемых элементов.
- transform: initial
- Устанавливает значение свойства в значение по умолчанию.
- transform: inherit
- Наследует значение свойства от родительского элемента.
- transform: translate()
- Функция translate(x,y) / translateX(n) / translateY(n)
- Сдвигает элемент на новое место, перемещая относительно обычного положения вправо и вниз, используя координаты X и Y, не затрагивая при этом соседние элементы. Если нужно сдвинуть элемент влево или вверх, то нужно использовать отрицательные значения.
- transform: scale()
- Функция scale(x,y) / scaleX(n) / scaleY(n)
- Масштабирует элементы, делая их больше или меньше. Значения от 0 до 1 уменьшают элемент. Первое значение масштабирует элемент по ширине, второе — по высоте. Отрицательные значения отображают элемент зеркально.
- transform: rotate()
- Функция rotate(угол)
- Поворачивает элементы на заданное количество градусов, отрицательные значения от -1deg до -360deg поворачивают элемент против часовой стрелки, положительные — по часовой стрелке. Значение rotate(720deg) поворачивает элемент на два полных оборота.
- transform: skew()
- Функция skew(x-угол,y-угол) / skewX(угол) / skewY(угол)
- Используется для деформирования (искажения) сторон элемента относительно координатных осей. Если указано одно значение, второе будет определено браузером автоматически.
- transform: matrix()
- Функция matrix(a, c, b, d, x, y)
- Смещает элементы и задает способ их трансформации, позволяя объединить несколько функций 2D-трансформаций в одной. В качестве трансформации допустимы поворот, масштабирование, наклон и изменение положения.
- Значение a изменяет масштаб по горизонтали. Значение от 0 до 1 уменьшает элемент, больше 1 — увеличивает.
- Значение c деформирует (сдвигает) стороны элемента по оси Y, положительное значение — вверх, отрицательное — вниз.
- Значение b деформирует (сдвигает) стороны элемента по оси X, положительное значение — влево, отрицательное — вправо.
- Значение d изменяет масштаб по вертикали. Значение меньше 1 уменьшает элемент, больше 1 — увеличивает.
- Значение x смещает элемент по оси X, положительное — вправо, отрицательное — влево.
- Значение y смещает элемент по оси Y, положительное значение — вниз, отрицательное — вверх.
#4 Примеры transform
#5 2D-трансформации, возможные значения transform-origin
- transform-origin: initial
- Устанавливает значение свойства в значение по умолчанию.
- transform-origin: inherit
- Наследует значение свойства от родительского элемента.
- transform-origin: ось Х(left, center, right, длина, %) ось Y(top, center, bottom, длина, %)
- Пара значений, заданная с помощью ключевых слов, единиц длины или процентов определяет, относительно какой части элемента будет происходить трансформация. Значения больше 100% увеличивают область трансформации элемента.
#6 Примеры transform-origin + анимации...
#7 Множественные трансформации
- transform: scale(1.5) rotate(-10deg);
- Можно объединить несколько трансформаций одного элемента, перечислив их через пробел в порядке проявления.