Демонстрационная витрина 3D книг с помощью CSS3 RUDEBOXВы бы хотели иметь свою библиотеку? пускай даже не большую, к примеру у себя на сайте. Это достаточно просто реализовать, создать динамичную витрину книг, которая будет реагировать на курсор мыши, при этом сопровождается плавной анимацией. Кроме этого была бы возможность прочесть у себя книгу, максимально приближенная дизайном и эффектом переворота страниц. В данном уроке мы рассмотрим как создать замечательную, живую, трехмерную витрину книг с помощью трансформаций стилей и немного магии с помощью jquery.

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

Шаг 1. HTML

 Наша книга состоит из шести основных сторон и один внутренних элементов страницы, которые мы будем использовать для имитации что-то вроде «вид изнутри». Мы могли бы использовать плагин JQuery BookBlock для перелистывания страниц, но мы не хотим перегружать страницу эффектами.

Демонстрационная витрина 3D книг с помощью CSS3 | RUDEBOX

Книга построена следующим образом:

Для каждой стороны книги мы зададим определенные параметры, кроме этого мы добавим описание к каждой из сторон. Нам необходимо повернуть книгу, при наведении курсора на 35 градусов по оси ординат.

При открытии книги, нажав на кнопку «Читать», будет происходит разворот книги, и мы можем перемещаться по страницам предварительного просмотра, нажав на стрелки.

Демонстрационная витрина 3D книг с помощью CSS3 RUDEBOX

Вращение и перелистывание страниц книги реализовано путем применения следующих классов:

Второй щелчок на книге будет закрывать ее и возвращать обратно на полку.

Вот и все. Готово!

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

Читайте также: