2.25. CSS3 3D-трансформации

Модуль 3D Transforms расширяет спецификацию CSS 2D Transforms, позволяя преобразовывать элементы в трехмерном пространстве. Новые функции преобразования для свойства transform выполняют трехмерные преобразования, расширяя координатное пространство до трех измерений, добавляя ось Z, перпендикулярную плоскости экрана, которая увеличивается по направлению к зрителю, а дополнительные свойства позволяют контролировать взаимодействие вложенных трехмерных преобразованных элементов.

Хотя некоторые значения свойства transform позволяют преобразовывать элемент в трехмерной системе координат, сами элементы не являются трехмерными объектами. Они существуют в двумерной плоскости (плоская поверхность) и не имеют глубины.

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

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

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

See the Pen Beautiful 3D-animation by Elena Nazarova (@nazarelen) on CodePen.

1. Свойство transform-style

По умолчанию преобразованные элементы создают плоское представление своего содержимого. Свойство transform-style позволяет преобразованным 3D-элементам и их 3D-потомкам использовать общее трехмерное пространство, выстраивая иерархии трехмерных объектов. Отображение 3D-потомков определяется моделью — так называемым контекстом 3D-рендеринга. Отображение зависит от z-позиции элементов в трехмерном пространстве, и если 3D-преобразования этих элементов вызывают пересечение, то они отображаются с пересечением.

Свойство устанавливается для родительского элемента.

Свойство не наследуется.

transform-style
Значения:
flat Значение по умолчанию. Все дочерние элементы отображаются плоскими в двумерной плоскости блока-контейнера.
preserve-3d Располагает элементы в трехмерном пространстве.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

transform-style: preserve-3d;
transform-style: flat;
transform-style: inherit;
transform-style: initial;

See the Pen JRodpX by Elena (@html5book) on CodePen.

Некоторые значения CSS-свойств элемента, для которого задано transform-style: preserve-3d, изменяют используемое значение на flat и предотвращают создание или расширение контекста 3D-рендеринга:

  • overflow: любое значение, кроме visible или clip.
  • opacity: любое значение меньше 1.
  • filter: любое значение, кроме none.
  • clip: любое значение, кроме auto.
  • clip-path: любое значение, кроме none.
  • isolation: если задано значение isolate.
  • mask-image: любое значение, кроме none.
  • mask-border-source: любое значение, кроме none.
  • mix-blend-mode: любое значение, кроме normal.

2. Свойство perspective

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

Свойства perspective и perspective-origin можно использовать для добавления ощущения глубины в сцену, делая элементы выше по оси Z (ближе к зрителю) и кажущимися большими, а те, которые находятся дальше — меньшими. Масштаб пропорционален d / (d - Z), где d — значение перспективы, является расстоянием от плоскости рисования до предполагаемого положения глаза зрителя.

Рис. 1. Зависимость 3D-перспективы и положения элемента относительно оси Z

Если 3D-перспектива задается с помощью функции perspective(), 3D-пространство активизируется только для одного элемента. Свойство perspective активирует 3D-пространство внутри элемента, содержащего дочерние трансформированные элементы и применяется к ним.

Свойство не наследуется.

perspective
Значения:
длина Задает расстояние до центра проекции, т.е. расстояние по оси Z. Значение может быть любым положительным числом, заданным в единицах длины. Чем больше значение, тем менее выражен эффект. 0 означает отсутствие перспективы.
none Значение по умолчанию. Означает отсутствие перспективы.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

perspective: none;
perspective: 100px;  
perspective: 10em;
perspective: inherit;
perspective: initial;
perspective-3d
Рис. 2. Примеры разных значений 3D-перспективы

3. Свойство perspective-origin

Обычно предполагаемое положение глаза зрителя находится в центре рисунка. Свойство perspective-origin управляет точкой начала координат, позволяя изменять направление трансформации дочернего 3D-элемента. Свойство должно использоваться вместе со свойством perspective для родительского элемента и свойством transform для дочернего элемента.

Свойство не наследуется.

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

Синтаксис

perspective-origin: 30px;
perspective-origin: left center;
perspective-origin: 200% 200%;
perspective-origin: inherit;
perspective-origin: initial;
perspective-origin
Рис. 3. Примеры задания точки трансформации

4. Свойство backface-visibility

Используя трехмерные преобразования, можно преобразовать элемент так, чтобы его обратная сторона была видна. 3D-преобразованные элементы отображают одинаковое содержимое с обеих сторон, поэтому обратная сторона выглядит как зеркальное отображение лицевой стороны. Свойство backface-visibility позволяет делать элемент невидимым, когда его обратная сторона обращена к зрителю.

Свойство полезно, когда вы создаете флип-карту, размещая два элемента вплотную друг к другу, или куб из 6 элементов.

Свойство не наследуется.

backface-visibility
Значения:
visible Значение по умолчанию. Указывает, что обратная сторона видна.
hidden Скрывает обратную сторону элемента.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

backface-visibility: visible;
backface-visibility: hidden;
backface-visibility: inherit;
backface-visibility: initial;

See the Pen Elegant Calling card with 3D rotate by Elena Nazarova (@nazarelen) on CodePen.

5. Функции 3D-трансформации

Свойство задает вид как 2D, так и 3D-преобразований элемента. 3D-преобразования описываются с помощью функций трансформации, перечисленных в таблице ниже.

Свойство не наследуется.

See the Pen EgVvww by Elena (@html5book) on CodePen.

Функция Описание
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. Значения могут задаваться в единицах длины или в %. Отрицательные значения будут перемещать элемент в противоположном направлении.
translateZ(z) Функция задает перемещение элемента на заданное расстояние в направлении оси Z. Значения могут задаваться в единицах длины или в %. Отрицательные значения будут перемещать элемент в противоположном направлении.
scale3d(x,y,z) Функция задает операцию трехмерного масштабирования по вектору масштабирования [sx,sy,sz], описываемому тремя параметрами. Отрицательные значения отображают элемент зеркально вдоль трех осей.
scaleZ(z) Функция масштабирует элемент в направлении оси Z, делая его больше или меньше. В качестве значения задается число. Результат функции наиболее выражен при совместном использовании с такими функциями, как rotate() и perspective().
rotate3d(x,y,z,угол) Функция вращает элемент по часовой стрелке относительно трех осей. Элемент поворачивается под углом, задаваемым последним параметром относительно вектора направления [x,y,z]. Отрицательные значения поворачивают элемент против часовой стрелки.
rotateX(угол) Функция задает поворот по часовой стрелке под заданным углом относительно оси X.
Функция rotateX(180deg) эквивалентна rotate3d(1,0,0,180deg).
rotateY(угол) Функция задает поворот по часовой стрелке под заданным углом относительно оси Y.
Функция rotateY(180deg) эквивалентна rotate3d(0,1,0,180deg).
rotateZ(угол) Функция задает поворот по часовой стрелке под заданным углом относительно оси Z.
Функция rotateZ(180deg) эквивалентна rotate3d(0,0,1,180deg).
perspective(n) Функция меняет перспективу обзора элемента, создавая иллюзию глубины. Чем больше значение функции перспективы, тем дальше от смотрящего расположен элемент. Значение должно быть больше нуля.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

transform: none;
transform: translate3d(100px, 100px, -200px);
transform: translate3d(50%, -100%, 10%);
transform: translate3d(-100px, -30px, 50px);
transform: translateZ(300px);
transform: translateZ(-50%);
transform: translateZ(150%);
transform: scale3d(2, 1, 3);
transform: scale3d(-1, -2, -1);
transform: scaleZ(3);
transform: scaleZ(-1);
transform: rotate3d(1, 1, 1, 45deg);
transform: rotateX(30deg);
transform: rotateX(-135deg);
transform: rotateY(30deg);
transform: rotateY(-135deg);
transform: rotateZ(30deg);
transform: rotateZ(-135deg);
transform: perspective(300);
transform: perspective(300px);
transform: inherit;
transform: initial;

По материалам CSS Transforms Module Level 2

Поделиться: