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

Содержание:

1. Установка 3D перспективы perspective

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

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

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

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

Создание плавных изменений свойств элементов

6. Название свойства transition-property

7. Продолжительность перехода transition-duration

8. Функция перехода transition-timing-function

9. Задержка перехода transition-delay

10. Краткая запись перехода transition

11. Плавный переход нескольких свойств

12. Примеры переходов для различных свойств

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

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

14. Точка трансформации transform-origin

15. Множественные трансформации

16. Трансформации на практике: как сделать ленточки

CSS3 трансформации изменяют размер, форму и положение элемента на веб-странице с помощью свойства transform. Трансформации преобразовывают элемент, не затрагивая остальные элементы веб-страницы, т.е. другие элементы не сдвигаются относительно него. По умолчанию трансформация происходит относительно центра элемента. Трансформации не действуют на строчные элементы display: inline.

Существуют два вида CSS3 трансформаций – 2D и3D. 2D-трансформации преобразовывают элементы в двухмерном пространстве.

1. Установка 3d-перспективы perspective

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

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

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

Синтаксис

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 для дочернего элемента. Не наследуется.

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

Синтаксис

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

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

Свойство определяет, как вложенные элементы отрисовываются в трехмерном пространстве. Свойство должно использоваться вместе со свойством transform и задается только для вложенных элементов. Не наследуется.

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

Синтаксис

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