С помощью 3D-трансформации создаются объемные реалистичные эффекты на веб-страницах.
В отличии от простой ( в одной плоскости ) трансформации в 3D-трансформации элементы могут дополнительно перемещаться вдоль оси Z.
Свойство perspective.
Для того, чтобы создать объемное перемещение элемента необходимо для родительского блока задать свойство perspective.
Свойство perspective определяет, на какое расстояние удален 3D элемент от точки обзора. С помощью этого свойства возможно изменять перспективу, откуда просматриваются 3D элементы. Значения должны быть положительными числами. Значение по умолчанию: none.
Причем, чем меньше это значение, тем визуально ближе к “зрителю” находится объект.”Научное” объяснение этого несколько заумно, что для того чтобы понять “О чем это Я?” просто зададим различные значения и посмотрим, что из этого получиться.
[raw]
perspective: 75px;
perspective: 100px;
perspective: 200px;
perspective: 1000px;
Свойство perspective-origin
Свойство perspective-origin устанавливает начало координат для свойства perspective. Значение по умолчанию perspective-origin: 50% 50%; . Позволяет изменять направление трансформации дочернего 3D элемента. Свойство должно использоваться вместе со свойством perspective для блока-родителя и свойством transform для дочернего элемента.
Может задаваться в единицах длины, в % или одним из трех ключевых слов: left, center,top, bottom.
| Возможные значения по оси Х: | Возможные значения по оси Y: |
|---|---|
| left или 0% | top или 0% |
| center или 50% | center или 50% |
| right или 100% | bottom или 100% |
| расстояние | расстояние |
| проценты | проценты |
perspective-origin:
0% 250%;
perspective-origin:
left top;
perspective-origin:
right bottom;
perspective-origin:
200px 1000px;
Свойство transform-style
Свойство transform-style определяет, как вложенные элементы будут отображаться в трехмерном пространстве.
При значении свойства flat все дочерние элементы будут отображаться плоскими в двухмерной плоскости блока-контейнера.
При значении свойства preserve-3d дочерние элементы сохраняют свое 3D-положение в пространстве.
Использование возможно только совместно со свойством transform, которое задает вид трансформации элемента.
Свойство transform
Свойство transform применяет 2D или 3D трансформацию к элементу.
Значения свойства transform для 3D-трансформации:
- translate3d(x,y,z) – Применяет 3D смещение
- scale3d(x,y,z) – Применяет 3D преобразование масштаба
- rotate3d(x,y,z,angle) – Определяет 3D поворот
- rotateX(angle) – Определяет 3D поворот вдоль оси X
- rotateY(angle) – Определяет 3D поворот вдоль оси Y
- rotateZ(angle) – Определяет 3D поворот вдоль оси Z
- matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) – Применяет 3D преобразование с помощью матрицы из шестнадцати(4х4) значений.
Прописываем это свойство вложенным элементам, которым необходима 3D-трансформация.
translate3d(30px,50px,100px)
scale3d(0,1,1)
rotate3d(2, 8, 3, 35deg)
rotateX(180deg)
rotateY(180deg)
rotateZ(180deg)
Матрица масштабирования
matrix3d(1, 0.4, 0.15, 0.003, 1, 1, 1.2, 0, 0, -1, 1, 0, 0, 0, 0, 1)
matrix3d(1, 0, 0, 0, 1.11, 1.9, 0.6, 0.005, 0, -1, 1, 0, 0, 0, 0, 1)
Свойство backface-visibility
Свойство backface-visibility определяет, должен или нет элемент быть видимым, когда он повернут относительно плоскости экрана.
Задняя сторона элемента представляет собой зеркальное отражение элемента. Это свойство используется, когда элемент повернут статически или вращается с помощью анимации и вы не хотите, чтобы его задняя сторона была видна.
Применяется к элементам, которые можно трансформировать.
Значения свойства backface-visibility:
- visible – Значение по умолчанию. Задняя сторона будет видна.
- hidden – Задняя сторона будет скрыта.
[/raw]
Источник