Создание 3D-трансформации

С помощью 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 – Задняя сторона будет скрыта.

Рамкаbackface-visibility: visible;

Фотография

Рамкаbackface-visibility: hidden;

Фотография

[/raw]
Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.