2.25. CSS3 3D-трансформации
Модуль 3D Transforms расширяет спецификацию CSS 2D Transforms, позволяя преобразовывать элементы в трехмерном пространстве. Новые функции преобразования для свойства transform выполняют трехмерные преобразования, расширяя координатное пространство до трех измерений, добавляя ось Z, перпендикулярную плоскости экрана, которая увеличивается по направлению к зрителю, а дополнительные свойства позволяют контролировать взаимодействие вложенных трехмерных преобразованных элементов.
Хотя некоторые значения свойства transform позволяют преобразовывать элемент в трехмерной системе координат, сами элементы не являются трехмерными объектами. Они существуют в двумерной плоскости (плоская поверхность) и не имеют глубины.
CSS3 3D-трансформации элементов
- Содержание:
- 1. Свойство transform-style
- 2. Свойство perspective
- 3. Свойство perspective-origin
- 4. Свойство backface-visibility
- 5. Функции 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 — значение перспективы, является расстоянием от плоскости рисования до предполагаемого положения глаза зрителя.
Если 3D-перспектива задается с помощью функции perspective(), 3D-пространство активизируется только для одного элемента. Свойство perspective активирует 3D-пространство внутри элемента, содержащего дочерние трансформированные элементы и применяется к ним.
Свойство не наследуется.
| perspective | |
|---|---|
| Значения: | |
| длина | Задает расстояние до центра проекции, т.е. расстояние по оси Z. Значение может быть любым положительным числом, заданным в единицах длины. Чем больше значение, тем менее выражен эффект. 0 означает отсутствие перспективы. |
| none | Значение по умолчанию. Означает отсутствие перспективы. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
perspective: none;
perspective: 100px;
perspective: 10em;
perspective: inherit;
perspective: initial;
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;
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