logo

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.

Возможные значения по оси Х: Возможные значения по оси 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;

В этом примере все идентично предыдущему, только добавлены значения для свойства 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-трансформация.

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;

Фотография

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


Практические примеры 0

Рекомендую прочитать...

Библиотека Animate.css
animate.css

CSS3 поддерживает покадровую анимацию, которая позволяет создавать сложные анимации объекта. Существует возможность задавать множество параметров работы анимации при помощи свойства animation и правила @keyframen.

Но лучше воспользоваться готовыми решениями, которые позволяют анимировать любой объект. Для этого воспользуемся библиотекой Animate it.

Читать полностью
Анимированный логотип на чистом CSS
Анимированный логотип

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

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

Читать полностью
Анимация SVG — иконок
Анимация SVG-иконок

В этой статье рассмотрим как анимировать иконки, точнее любую SVG-графику. SVG-графика — это масштабируемая векторная графика, которую можно использовать непосредственно в коде страницы сайта. Преимущество перед остальными видами графики в том, что при увеличении размеров картинки — качество не теряется.

Читать полностью

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.