Создание 3D эффекта: информация о товаре CSS3 3D Transform | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSСоздание 3D эффекта: информация о товаре CSS3 3D Transform
Дата: 21.05.2013 в 23:50 | Просмотров: 3740

Создание 3D эффекта: информация о товаре CSS3 3D Transform

создание 3D эффекта, css3 3d
Скачатьбесплатно с сервера
Демодемонстрация

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

Результат

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

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

CSS3 3D, создание эффекта 3d

Техническая часть

Технику создания эффекта, мы уже использовали раннее (смотрите статью – 3D форма поиска для сайта на JQuery и CSS3!). Есть два элемента, передняя боковая и нижняя стороны, передняя часть изображения продукта и его информация с нижней стороне. Нижняя сторона скрыта, вращаем его по оси Х до -90 градусов и воспроизводим translateZ для изменения позиции элементов.

техника создания 3d эффектов

Есть два элемента в обертке, сначала wrapper, для установки точки зрения, насколько далеко они расположены относительно элемента от просмотра пользователей, тем меньше значение элемента.

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

HTML&CSS разметка и стилизация

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

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

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

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

Вот конечный результат:

создание 3d анимации - результат

Финиш

И вот мы закончили, и 3D куб готов к работе. Этот эффект должен работать в любом браузере с поддержкой 3D Transform. Я также добавляю скрипт Modernizr, для проверки браузера на поддержку созданного нами эффекта. Наслаждайтесь! Надеюсь Вам было интересно!


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://www.webstuffshare.com
Перевел: Владислав Бондаренко


Добавить комментарий