CSS3 трансформации определяют, каким станет тот или иной блочный элемент. Трансформации преобразовывают элемент, не влияя на остальные части веб-документа, т.е. другие объекты не сдвигаются относительно него. По умолчанию трансформации происходят относительно центра элемента. Свойства не наследуются. Существуют два вида CSS3 трансформаций – 2D и 3D. 2D-трансформации, в отличие от 3D-трансформаций, имеют более широкую поддержку браузерами.
2D-трансформации элементов с помощью свойства transform
Поддержка
IE: 10.0, 9.0 -ms- Firefox: 16.0, 3.5 -moz- Chrome: 36.0, 4.0 -webkit- Safari: 3.1 -webkit- Opera: 23.0, 15.0 -webkit- 12.1, 10.5 -o- iOS Safari: 9, 7.1 -webkit- Opera Mini: — Android Browser: 44, 4.1 -webkit- Chrome for Android: 44
1. Точка трансформации
Свойство позволяет сместить точку, относительно которой происходит трансформация элемента. Значение по умолчанию — center, или 50% 50%
transform-origin | |
---|---|
Значения: | |
ось Х(left, center, right, длина, %) ось Y(top, center, bottom, длина, %) |
Пара значений, заданная с помощью ключевых слов, единиц длины или процентов, определяет, относительно какой части элемента будет происходить трансформация. Значения больше 100% увеличивают область трансформации элемента. Пример смотрите здесь. |
Синтаксис
div { -ms-transform: rotate(45deg); -ms-transform-origin: 20% 40%; -webkit-transform: rotate(45deg); -webkit-transform-origin: 20% 40%; transform: rotate(45deg); transform-origin: 20% 40%; }
2. Функции 2D-трансформации
Свойство transform задает вид преобразования элемента. Свойство описывается с помощью значений функций трансформации, перечисленных в таблице ниже, например,
div {transform: scaleX(2);}.Не наследуется.
Допустимые значения:
matrix() — любое число
translate() ,translateX() ,translateY() — единицы длины (положительные и отрицательные), %
scale() ,scaleX() ,scaleY() — любое число
rotate() ,rotateX() ,rotateY() — угол (deg, grad, rad или turn)
skew() ,skewX() ,skewY() — угол (deg, grad, rad)
Функция | Описание |
---|---|
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) | Функция масштабирует элемент в направлении оси X, делая его больше или меньше. В качестве значения задается число. Если число больше единицы, элемент масштабируется вверх и выглядит больше, если значение находится между единицей и нулем, элемент масштабируется вниз по оси Х и выглядит меньше. Отрицательные значения не уменьшают элемент, они просто отображают его зеркально по горизонтали. |
scaleY(n) | Функция масштабирует элемент в направлении оси Y, делая его больше или меньше. В качестве значения задается число. Если число больше единицы, элемент масштабируется вверх и выглядит больше, если значение находится между единицей и нулем, элемент масштабируется вниз по оси Y и выглядит меньше. Отрицательные значения не уменьшают элемент, они просто отображают его зеркально по вертикали. |
rotate(угол) | Поворачивает элементы на заданное количество градусов, отрицательные значения от -1 до -360 поворачивают элемент против часовой стрелки, положительные — по часовой стрелке. Значение rotate(720deg) заставит повернуться элемент на два полных оборота. |
skew(x-угол,y-угол) | Используется для деформирования (искажения) сторон элемента относительно осей координат, если указать только одно значение, то второе будет определено браузером произвольно. |
skewX(угол) | Деформирует стороны элемента относительно оси X. |
skewY(угол) | Деформирует стороны элемента относительно оси Y. |
Примеры использования
1. translateX(n) | |
2. translateY(n) | |
3. translate(x, y) | |
4. scaleX(n) | |
5. scaleY(n) | |
6. scale(x, y) | |
7. rotate(angle) | |
8. skewX(angle) | |
9. skewY(angle) | |
10. skew(x-angle, y-angle) | |
11. matrix(a, c, b, d, x, y) |
3. Множественные трансформации
Можно объединить несколько трансформаций одного элемента, перечислив их через пробел в порядке проявления.
div {transform: scale(1.5) rotate(-10deg);}
3D трансформации
CSS3 3D трансформации создают объемные реалистичные эффекты на веб-страницах. 3D трансформации работают аналогично с 2D трансформациями с разницей в том, что элементы могут перемещаться вдоль оси Z, вглубь экрана и из него. Чтобы активизировать 3D пространство, нужно установить свойство perspective для родительского контейнера.
Поддержка браузерами
IE: 10.0 Firefox: 16.0, 10. -moz- Chrome: 36.0, 12.0 -webkit- Safari: 4.0 -webkit- Opera: 23.0, 15.0 -webkit- iOS Safari: 9, 7.1 -webkit- Opera Mini: — Android Browser: 44, 4.1 -webkit- Chrome for Android: 44
1. Установка 3D-перспективы
Свойство perspective активирует 3D-пространство для элемента. Оба свойства — perspective и perspective() добавляют глубину элементу, увеличивая его размеры по оси Z, сам элемент при этом становится визуально меньше. Чем меньше значение, тем ближе Z-пространство к зрителю и тем больше эффект, заданный с помощью свойства transform.
Если 3D-перспектива задается с помощью функции perspective(), 3D-пространство активизируется только для одного элемента. Свойство perspective активирует 3D-пространство внутри элемента, содержащего дочерние трансформированные элементы и применяется к ним. Свойство не наследуется.
perspective | |
---|---|
Значения: | |
длина | Задает глубину просмотра, т.е. расстояние по оси Z. Значение может быть любым положительным числом. Если единица измерения не указана, по умолчанию она считается в px. Чем больше значение, тем менее выражен эффект. 0 означает отсутствие перспективы. |
none | Значение по умолчанию. Означает, что преобразование перспективы не применяется. |
inherit | Наследует это свойство от родительского элемента. |
Синтаксис
ul { -webkit-perspective: 500px; perspective: 500px; } li { -webkit-transform: rotateX(50deg); transform: rotateX(50deg); }
2. Задание точки трансформации для 3D элемента
Свойство perspective-origin устанавливает начало координат для свойства perspective. Значение по умолчанию perspective-origin: 50% 50%;. Позволяет изменять направление трансформации дочернего 3D элемента. Свойство должно использоваться вместе со свойством perspective для блока-контейнера и свойством transform для дочернего элемента. Не наследуется.
perspective-origin | |
---|---|
Значения: | |
значение по оси X/значение по оси Y | Первое значение указывает положение элемента по оси X. Может задаваться в единицах длины, в % или одним из трех ключевых слов: left (эквивалентно 0% по оси X), center (эквивалентно 50% по оси X) или right (эквивалентно 100% по оси X). Второе значение указывает положение по оси Y. Задается в единицах длины, в % или одним из трех ключевых слов: top (эквивалентно 0% по оси Y), center (эквивалентно 50% по оси Y) или bottom (эквивалентно 100% по оси Y). |
inherit | Наследует это свойство от родительского элемента. |
Синтаксис
ul { -webkit-perspective: 150px; -webkit-perspective-origin: 10% 10%; perspective: 150px; perspective-origin: 10% 10%; } li { -webkit-transform: rotateX(50deg); transform: rotateX(50deg); }
3. Стиль 3D преобразований
Свойство transform-style определяет, как вложенные элементы отрисовываются в трехмерном пространстве. Свойство должно использоваться вместе со свойством transform и задается только для вложенных элементов. Не наследуется.transform-style | |
---|---|
Значения: | |
flat | Все дочерние элементы будут отображаться плоскими в двухмерной плоскости блока-контейнера. |
preserve-3d | Располагает элементы в трехмерном пространстве. |
inherit | Наследует это свойство от родительского элемента. |
Синтаксис
div { -webkit-transform: rotateY(60deg); -webkit-transform-style: preserve-3d; transform: rotateY(60deg); transform-style: preserve-3d; }
4. Видимость обратной стороны элемента
Свойство
backface-visibility | |
---|---|
Значения: | |
visible | Значение по умолчанию. Указывает, что обратная сторона видна. |
hidden | Скрывает обратную сторону элемента. |
inherit | Наследует это свойство от родительского элемента. |
Синтаксис
div { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
5. Функции 3D трансформации
Свойство transform задает вид как 2D, так и 3D преобразований элемента. Описывается с помощью функций трансформации, перечисленных в таблице ниже. Не наследуется.
Функция | Описание |
---|---|
matrix3d (n,n,n,n, n,n,n,n, n,n,n,n, n,n,n,n) |
Функция задает трехмерное преобразование как однородную матрицу размером 4×4 с шестнадцатью значениями в столбцах. Все другие функции преобразований основаны на данной функции. |
translate3d(x,y,z) | Функция задает перемещение элемента в 3D пространстве. Движение происходит по вектору [tx, ty, tz], где tx перемещение вдоль оси X, ty — перемещение вдоль оси Y, а tz — вдоль оси Z. Значения могут задаваться в единицах длины или в %. Отрицательные значения будут перемещать элемент в противоположном направлении.
transform: translate3d(100px, 100px, -200px); |
translateZ(z) | Функция задает перемещение элемента на заданное расстояние в направлении оси Z. Значения могут задаваться в единицах длины или в %. Отрицательные значения будут перемещать элемент в противоположном направлении.
transform: translateZ(300px); |
scale3d(x,y,z) | Функция задает операцию трехмерного масштабирования по вектору масштабирования [sx,sy,sz], описываемому тремя параметрами. Отрицательные значения отображают элемент зеркально вдоль трех осей.
transform: scale3d(2, 1, 3); |
scaleZ(z) | Функция масштабирует элемент в направлении оси Z, делая его больше или меньше. В качестве значения задается число. Результат функции наиболее выражен при совместном использовании с такими функциями, как rotate() и perspective().
transform: scaleZ(3); |
rotate3d(x,y,z,угол) | Функция вращает элемент по часовой стрелке относительно трех осей. Элемент поворачивается под углом, задаваемым последним параметром относительно вектора направления [x,y,z]. Отрицательные значения поворачивают элемент против часовой стрелки.
transform: rotate3d(1, 1, 2, 45deg); |
rotateX(угол) | Функция задает поворот по часовой стрелке под заданным углом относительно оси X. Функция rotateX(180deg) эквивалентна rotate3d(1,0,0,180deg). transform: rotateX(30deg); |
rotateY(угол) | Функция задает поворот по часовой стрелке под заданным углом относительно оси Y. Функция rotateY(180deg) эквивалентна rotate3d(0,1,0,180deg). transform: rotateY(30deg); |
rotateZ(угол) | Функция задает поворот по часовой стрелке под заданным углом относительно оси Z. Функция rotateZ(180deg) эквивалентна rotate3d(0,0,1,180deg). transform: rotateZ(30deg); |
perspective(n) | Функция меняет перспективу обзора элемента, создавая иллюзию глубины. Чем больше значение функции перспективы, тем дальше от смотрящего расположен элемент. Значение должно быть больше нуля.
transform: perspective(300); |
синтаксис
div { -webkit-transform: rotateX(150deg); transform: rotateX(150deg); }