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

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

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

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

• Содержание:
• 1. Установка 3D-перспективы perspective
• 2. Задание точки трансформации для 3D-элемента perspective-origin
• 3. Стиль 3D-преобразований transform-style
• 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. Установка 3D-перспективы perspective

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

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

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

Синтаксис

ul {
  perspective: 500px;
}
li {
  transform: rotateX(50deg);
}
li:hover {
  transform: perspective(900px) rotate3d(180,-45,0,-135deg);
}

2. Задание точки трансформации для 3D-элемента perspective-origin

Свойство устанавливает точку начала координат для свойства perspective. Значение по умолчанию perspective-origin: 50% 50%;. Позволяет изменять направление трансформации дочернего 3D-элемента. Свойство должно использоваться вместе со свойством perspective для блока-контейнера и свойством transform для дочернего элемента. Не наследуется.

Синтаксис

ul {
perspective: 150px;
perspective-origin: 10% 10%;
}
li {
transform: rotateX(50deg);
}

3. Стиль 3D-преобразований transform-style

Свойство определяет, как дочерние трансформированные элементы (элементы, для которых задано свойство transform) отрисовываются в трехмерном пространстве. Задается для блока-контейнера. Не наследуется.

Синтаксис

ul {
transform-style: preserve-3d;
}
li {
transform: rotateY(60deg);
}

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

4. Видимость обратной стороны элемента backface-visibility

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

Синтаксис

div {
backface-visibility: hidden;
}

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

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

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

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

Синтаксис

div {
transform: rotateX(150deg);
}