Создаем 3D стеллаж с книгами при помощи CSS transforms rotate

Сегодня я хочу рассказать Вам о создании концепции стеллажа с книгами. Идея состоит в том, чтобы создать подборку книг в виде стеллажа при помощи 3D css transform rotate и добавить к ним некоторые интересные эффекты, такие как: вращение, перелистывание и открытие. Возможно это будет интересная концепция для книжных интернет-магазинов, поскольку это добавляет интерактивности для сайта.

Сложность

Обратите внимание, наш демонстрационный пример, будет работать только в браузерах, которые поддерживают CSS 3D transform rotate. В других браузерах, мы просто отобразим обложку книги.

Нам нужно создать структуру, которую мы сможем преобразовать в 3D-объект при помощи CSS 3D transform rotate. Наша книга состоит из шести основных сторон и одного внутреннего элемента (страницы).

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

<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>Red snapper Kafue pike fangtooth humums slipmouth, salmon cutlassfish; swallower European perch mola mola sunfish, threadfin bream. Billfish hog sucker trout-perch lenok orbicular velvetfish. Delta smelt striped bass, medusafish dragon goby starry flounder cuchia round whitefish northern anchovy spadefish merluccid hake cat shark Black pickerel. Pacific cod.</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 градусов по оси Y:

.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);
}

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

ДЕМО СКАЧАТЬ

 

Перевод статьи 3D Book Showcase

Тэги: 3D transformgallery

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.