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

CSS3 3D-трансформации создают объемные реалистичные эффекты на веб-страницах.

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

Чтобы активизировать 3D-пространство, нужно установить свойство perspective для родительского контейнера.

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

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

Если 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 и задается только для вложенных элементов. Не наследуется.

Синтаксис

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

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

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

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

Синтаксис

div {backface-visibility: hidden;}

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

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

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

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

Синтаксис

div {transform: rotateX(150deg);}