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

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

Lightbox на чистом CSS3 без JavaScript
Lightbox на чистом CSS3 без использования JavaScript

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

Читать полностью
Трансформация «Дверной глазок»
трансформация Дверной глазок

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

Читать полностью
3D-трансформация в примерах
3d трансформация в примерах

В первом примере при наведении курсора на изображение как бы открывается обложка альбома, открывая скрытую, но «важную» информацию.
Второй пример — первоначально блоки с анонсом мы видим в перспективе, при наведении мышки блок принимает нормальный вид.

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

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

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

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