Создание 3D книг CSS + готовые примеры!
↓ Также Вам будет интересно ↓
Создание 3D книг с помощью CSS 3D-преобразования. Главная цель – реальность и интерактивность.
Сегодня мы хотим поделиться экспериментальной концепцией – витрина с книгами. Цель состоит в том, чтобы сделать книги более реалистичным с помощью 3D-преобразования и применить некоторые забавные эффекты, такие как вращение, возможность открывать книгу и листать страницы. Особенно это может быть интересно для интернет-магазинов книг, поскольку это добавляет интерактивности сайту, а также пользователю становится интереснее.
Обратите внимание: это работает только в браузерах, которые поддерживают CSS 3D-преобразования. Для других браузеров, будет просто показана обложка книги.
Превосходно это работает в браузерах WebKit!
То, что мы сделали, чтобы построить структуру, мы можем превратить в 3D-объект с помощью CSS 3D-преобразования. Наша книга состоит из шести основных сторон, и одного внутреннего элемента, который мы будем использовать для разбиения на страницы содержимого книги, имитируя вид”книги”. Мы могли бы использовать плагин Jquery BookBlock для возможности листать страницы, но мы не будем перегружать его слишком большим количеством эффектов.
Структура
Книга построена следующим образом:
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<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 градусов:
1 2 3 |
.bk-list li .bk-book.bk-bookdefault:hover { transform: rotate3d(0,1,0,35deg); } |
После открытия книги, нажав на ссылку “ОТКРЫТЬ КНИГУ”, передняя часть будет открыть и мы можем просматривать страницы внутри книги, нажав на стрелки вперед и назад.
Вращение и листание книги сделано путем применения некоторых классов:
1 2 3 4 5 6 7 8 9 10 |
/* Transform classes */ <p style="text-align: center;">.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); } |
Во втором примере демо, мы отображаем книгу так, чтобы видеть только часть книги, с левой стороны. При наведении мы моделируем движение, как-будто мы хотим взять книгу, слегка вращая его к нам. При нажатии мы откроем её.
Скачиваем исходники и экспериментируем. Надеюсь этот функционал будет полезен!
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
http://shashlicoff.ru
Спасибо вам большое …