Существует множество способов показа информации о продукте. Например, при наведении на изображение продукта, информация о нём появляется выше или даже всплывает новое окно. В этом уроке я покажу как отобразить информацию о продукте используя кубический стиль 3D преобразования CSS3.

Результат

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

Техника

Для создания куба, мы будем использовать технику, которая является формой предыдущей техники, созданной раннее (смотри: Создание формы поиска, используя jQuery и CSS3). У нас есть два элемента: передняя часть и нижняя часть, где передняя является изображением продукта, а нижняя – информацией о нём. Нижняя часть свёрнута по оси Х на -90 градусов и оперирует значением translateZ, чтобы расположиться под передней.

Есть два элемента, которые их оборачивают: первый – это wrapper для для того, чтобы установить перспективу, которая определит как далеко находится элемент, помещённый относительно наблюдателя. Чем меньше значение, тем ближе будет помещен элемент. Второй элемент  item, тоже обёрнутый в wrapper, оборачивает изображение и информацию. При наведении, этот элемент будет поворачивается по оси Х на 95 градусов, чтобы показать информацию и скрыть изображение.

Разметка и стили

Я использую все изображения из Shopify App Store. Каждый продукт будет иметь два обёрнутых элемента и один элемент информации, как уже сказано выше. Ниже приведена разметка:

<div class="wrapper">
<div class="item">
    <img src="images/contact.png">
    <span class="information">
      <strong>Contact Form</strong> The easiest way to add a contact form to your shop.
    </span>
  </div>
</div>  
<!-- to n wrapper -->

Каждый wrapper будет иметь display: inline-block и значение перспективы, установленное в 4000px, item будет иметь свойство transform-style, установленное в preserve-3d, что позволит его потомкам сохранить свою 3D-позицию, а так же позволит отразиться изменениям в соответствии со значением свойства transition во время анимации.

.wrapper {
  display: inline-block;
  width: 310px;
  height: 100px;
  vertical-align: top;
  margin: 1em 1.5em 2em 0;
  cursor: pointer;
  position: relative;
  font-family: Tahoma, Arial;
  perspective: 4000px;
}  
.item {
  height: 100px;
  transform-style: preserve-3d;
  transition: transform .6s;
}

Изображение продукта и его информация будут иметь transition, оба будут изменять border-radius и box-shadow, когда пользователь наводит мышью на элемент. Это нужно для того, чтобы сделать переход более элегантным.

.item img {
  display: block;
  position: absolute;
  top: 0;
  border-radius: 3px;
  box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
  transform: translateZ(50px);
  transition: all .6s;
}  
.item .information {
  display: block;
  position: absolute;
  top: 0;
  height: 80px;
  width: 290px;
  text-align: left;
  border-radius: 15px;
  padding: 10px;
  font-size: 12px;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
  box-shadow: none;
  background: linear-gradient(to bottombottom,rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
  transform: rotateX(-90deg) translateZ(50px);
  transition: all .6s;
}

И последнее – это когда пользователь наводит мышью на наш элемент. При наведении, элемент item будет поворачиваться, при этом border-radius и box-shadow у изображения и блока информации будут изменяться.

.item:hover {
  transform: translateZ(-50px) rotateX(95deg);
}  
.item:hover img {
  box-shadow: none;
  border-radius: 15px;
}  
.item:hover .information {
  box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
  border-radius: 3px;
}

Результат:

Заключение:

Мы закончили. Кубический переход будет работать только в браузерах, которые поддерживают  3D-преобразования. Чтобы проверять возможности браузеров я добавил скрипт-детектор modernizr. Наслаждайтесь!

Источник:  css-live.ru