ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект поворота 3D-карты с помощью CSS

Эффект поворота 3D-карты с помощью CSS

В материале рассмотрим вариант с простым разворотом изображение в div, где исполняется переходы форме 3d-преобразования с использованием CSS. Где нужно подчеркнуть, что на старой версий браузера, это преобразование может исполнятся не корректно по своему эффекту. Так как ключевым моментом является то, что для обычных браузеров используются обычные трехмерные преобразования.

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

И на другой стороне представлена полная характеристика именно этого товара, что очень удобно для покупателя. В плане того, это все делается на месте, так как изначально действующий поворот не занимает лишнего места, что основном пишут под картинками.

Работа элемента, где при открытие установлено изображение:

При наведение клика происходит поворот, где появляется информация:

Как создать впечатляющую 3D графику в CSS

В чем преимущество плана размещение:

1. Поместите изображение поверх div внутри контейнера.
2. Поместите это в другой контейнер с определенной перспективой.
3. При наведении курсора на внешний контейнер добавьте вращение вокруг оси Y во внутренний контейнер.

Приступаем к установке:

HTML

Код

<div id="kabecaus-gaperceved">
<div id="cevedu-vededsab" class="gavingonaven">
  <div class="gevolgavin face">
  <img src="Ссылка на изображение"/>
  </div>
  <div class="desanum face center">
  <p>С разворотом идет описание под изображение, которое находится на первом плане</p>
  <p>Здесь можно поставить ссылку для перехода</p>
  </div>
</div>
</div>

CSS

Код

#kabecaus-gaperceved {
  position: relative;
  margin: 8px auto;
  width: 450px;
  height: 281px;
  z-index: 1;
  cursor:pointer;
  border: 2px solid #b7b1b1;
}
#kabecaus-gaperceved {
  perspective: 1000;
}
#cevedu-vededsab {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#kabecaus-gaperceved:hover #cevedu-vededsab {
  transform: rotateY(180deg);
  box-shadow: -7px 7px 7px #bbb5b5;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.face.desanum {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 8px;
  color: #f7f4f4;
  text-align: center;
  background-color: #28465a;
}

Как идея, где дизайн можно построить так, чтоб при наведении или клике они переворачивали, показывая номер контакта, адрес электронной почты или URL для перехода.

Эффект переворачивания имеет гораздо более высокое качество в браузерах, которые поддерживают 3D-преобразования, но все же имеет отличительный внешний вид в старых браузерах.

Демонстрация

13 Февраля 2019 Просмотров: 1551 Комментариев: (1)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 1
Порядок вывода комментариев: Kosten 13 Февраля 2019 02:36¹ 0 Аналогичная тема с предоставленным изображением, только в разных вариациях можете посмотреть в этой теме на форуме.