Создание 3D эффекта: информация о товаре CSS3 3D Transform
↓ Также Вам будет интересно ↓
Есть много способов того, как показать информация о товаре, например, при наведении на изображение продукта, всплывающее окно с информацией, или на новой странице. В этом уроке мы рассмотрим создание 3D эффекта, а точнее показ информации о продукте в стиле куба, с использованием CSS3 3D Transform.
Результат
Прежде чем приступать к технической части, посмотрите следующее изображение, которое является результатом того, что мы хотим достичь. Вначале показано только изображение товара, в то время как информация будет скрыта.
При наведении пользователем на товар, они оба будут вращаться вертикально по направлению вверх. Информацию о продукте станет видимой, в поле зрения пользователя а изображение скрыто, и все это будет выглядеть как вращающийся куб, с 3D эффектом.
Техническая часть
Технику создания эффекта, мы уже использовали раннее (смотрите статью – 3D форма поиска для сайта на JQuery и CSS3!). Есть два элемента, передняя боковая и нижняя стороны, передняя часть изображения продукта и его информация с нижней стороне. Нижняя сторона скрыта, вращаем его по оси Х до -90 градусов и воспроизводим translateZ
для изменения позиции элементов.
Есть два элемента в обертке, сначала wrapper
, для установки точки зрения, насколько далеко они расположены относительно элемента от просмотра пользователей, тем меньше значение элемента.
Второй элемент, с названием item
, с классом wrapper
, содержит изображение и информацию о товаре. Этот элемент, при наличии событие наведения мыши, будет вращать его по оси Х до 95 градусов, чтобы показать информацию и скрыть изображение.
HTML&CSS разметка и стилизация
В примере мы используем изображения от Shopify App Store. Каждый продукт будет иметь две обертки элементов и один элемент с информацией, как и было описано выше. В общем, вот разметка:
1 2 3 4 5 6 7 8 |
<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> |
Каждая обертка wrapper
, будет иметь display:inline-block
и значение perspective
4000px. Класс item
будет иметь 3D-преобразование значений стилей, чтобы сохранить его позицию 3D, а также, чтобы сделать анимацию изменения при наведении.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.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
, оба из них изменяют значения закругления границ и тени при наведении, чтобы сделать переход более элегантным.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.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; } |
И последнее, когда пользователь наводит мышью на продукт, то он будет вращаться и изменять значение гакругления и теней для изображения и информации.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.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 куб готов к работе. Этот эффект должен работать в любом браузере с поддержкой 3D Transform. Я также добавляю скрипт Modernizr, для проверки браузера на поддержку созданного нами эффекта. Наслаждайтесь! Надеюсь Вам было интересно!
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко