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

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

Свойство perspective.

Для того, чтобы создать объемное перемещение элемента необходимо для родительского блока задать свойство perspective.

Свойство perspective определяет, на какое расстояние удален 3D элемент от точки обзора. С помощью этого свойства возможно изменять перспективу, откуда просматриваются 3D элементы. Значения должны быть положительными числами. Значение по умолчанию: none.

Причем, чем меньше это значение, тем визуально ближе к «зрителю» находится объект.»Научное» объяснение этого несколько заумно, что для того чтобы понять «О чем это Я?» просто зададим различные значения и посмотрим, что из этого получиться.

perspective: 75px;

perspective: 100px;

perspective: 200px;

perspective: 1000px;

Код для всех примеров одинаков, за исключением одной строки в таблице стилей. Ну и естественно свой путь для каждого изображения.

<div class="test3d">
  <div class="persp">
    <img src="images/img.jpg" alt="" class="persp_img">
    <div class="persp_text">
      <p>perspective: 75px;</p>
    </div>
  </div>
</div>

 
.test3d {
    width: 150px;
    height: 200px;
    margin: 15px 25px;
    display: inline-block;
    /*  Вариант 1  */
    perspective: 75px;
    /*  Вариант 2  
    perspective: 100px;     */
    /*  Вариант 3  
    perspective: 200px;     */
    /*  Вариант 4  
    perspective: 1000px;    */
}
.test3d:hover .persp {
    transform: rotateY(180deg);
}
.persp {
    position: relative;
    transition: 1.5s;
    transform-style: preserve-3d;
}
.persp_text {
    text-align: center;
    font-size: 20px;
    line-height: 50px;
    text-shadow: 0 1px 3px #a2a0a0;
    position: absolute;
    left: 0;
    top: 0;
    transform: rotateY(180deg);
}
.persp_img {
    vertical-align: middle;
}

.persp_img,
.persp_text {
    width: 150px;
    height: 200px;
    border: 4px double #999;
    background: #fff;
    backface-visibility: hidden;
}

Свойство perspective-origin

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

perspective-origin:
0% 250%;

perspective-origin:
left top;

perspective-origin:
right bottom;

perspective-origin:
200px 1000px;

В этом примере все идентично предыдущему, только добавлены значения для свойства perspective-origin

.test3d {
    width: 150px;
    height: 200px;
    margin: 15px 25px;
    display: inline-block;
    perspective: 1000px;
     /*  Вариант 1  */
    perspective-origin: 0% 250%;
    /*  Вариант 2  
    perspective-origin: left top;     */
    /*  Вариант 3  
    perspective-origin: right bottom;     */
    /*  Вариант 4  
    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-трансформация.

Матрица масштабирования

Свойство backface-visibility

Свойство backface-visibility определяет, должен или нет элемент быть видимым, когда он повернут относительно плоскости экрана.

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

Применяется к элементам, которые можно трансформировать.

Значения свойства backface-visibility:

• visible — Значение по умолчанию. Задняя сторона будет видна.

• hidden — Задняя сторона будет скрыта.

backface-visibility: visible;

backface-visibility: hidden;

В «камере хранения» на Яндекс Диске находится архив с выше расположенными примерами, желающие могут его скачать и применить в своих целях.