15 фев 2016
Демонстрационная витрина 3D книг на CSS3
Ares Категория: Web-Мастеру » Уроки
У нас вы можете скачать бесплатно Демонстрационная витрина 3D книг на CSS3

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Демонстрационная витрина 3D книг на CSS3

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



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

Шаг 1. HTML

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

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

<div class="bk-book">

<div class="bk-front">
<div class="bk-cover">
<h2>
<span>Anthony Burghiss</span>
<span>A Catwork Orange</span>
</h2>
</div>
<div class="bk-cover-back"></div>
</div>

<div class="bk-page">
<div class="bk-content bk-content-current">
<p>Описание</p>
</div>
<div class="bk-content">
<!-- ... -->
</div>
<div class="bk-content">
<!-- ... -->
</div>
</div>

<div class="bk-back">
<p>In this nightmare vision of cats in revolt, fifteen-year-old Alex and his friends set out on a diabolical orgy of robbery, rape, torture and murder. Alex is jailed for his teenage delinquency and the State tries to reform him - but at what cost?</p>
</div>

<div class="bk-right"></div>

<div class="bk-left">
<h2>
<span>Anthony Burghiss</span>
<span>A Catwork Orange</span>
</h2>
</div>

<div class="bk-top"></div>

<div class="bk-bottom"></div>
</div>


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

.bk-list li .bk-book.bk-bookdefault:hover {
transform: rotate3d(0,1,0,35deg);
}


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

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

.bk-list li .bk-viewinside .bk-front {
transform: translate3d(0,0,20px) rotate3d(0,1,0,-160deg);
}

.bk-list li .bk-book.bk-viewinside {
transform: translate3d(0,0,150px) rotate3d(0,1,0,0deg);
}

.bk-list li .bk-book.bk-viewback {
transform: translate3d(0,0,0px) rotate3d(0,1,0,180deg);
}


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

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

Скачивание файлов доступно только зарегистрированным пользователям









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