Создание 3D книг CSS + готовые примеры! | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSСоздание 3D книг CSS + готовые примеры!
Дата: 17.04.2013 в 20:21 | Просмотров: 6594

Создание 3D книг CSS + готовые примеры!

Создание 3D книг + готовые примеры!
Скачатьбесплатно с сервера
Демодемонстрация

Создание 3D книг с помощью CSS 3D-преобразования. Главная цель – реальность и интерактивность.
Сегодня мы хотим поделиться экспериментальной концепцией – витрина с книгами. Цель состоит в том, чтобы сделать книги более реалистичным с помощью 3D-преобразования и применить некоторые забавные эффекты, такие как вращение, возможность открывать книгу и листать страницы. Особенно это может быть интересно для интернет-магазинов книг, поскольку это добавляет интерактивности сайту, а также пользователю становится интереснее.
Обратите внимание: это работает только в браузерах, которые поддерживают CSS 3D-преобразования. Для других браузеров, будет просто показана обложка книги.
Превосходно это работает в браузерах WebKit!
Создание 3D книг
То, что мы сделали, чтобы построить структуру, мы можем превратить в 3D-объект с помощью CSS 3D-преобразования. Наша книга состоит из шести основных сторон, и одного внутреннего элемента, который мы будем использовать для разбиения на страницы содержимого книги, имитируя вид”книги”. Мы могли бы использовать плагин Jquery BookBlock для возможности листать страницы, но мы не будем перегружать его слишком большим количеством эффектов.

Структура

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

Имена классов названы согласно сторонам книги. Так как мы хотим, чтобы книга “открывалась”, то мы должны задать классы передней стороне книги и задней стороне. Сзади книги будет также некоторый контент, которые будет виден, когда мы листаем книгу. Также при наведении на книгу, добавим незначительное вращение.
В частности, мы поворачиваем целую книгу по оси ординат на 35 градусов:

После открытия книги, нажав на ссылку “ОТКРЫТЬ КНИГУ”, передняя часть будет открыть и мы можем просматривать страницы внутри книги, нажав на стрелки вперед и назад.
Создание 3D книг
Вращение и листание книги сделано путем применения некоторых классов:

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

создание 3D книг 4

Скачиваем исходники и экспериментируем. Надеюсь этот функционал будет полезен!

Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tympanus.net/codrops/2013/01/08/3d-book-showcase/
Перевел: Владислав Бондаренко


ВСЕ КОММЕНТАРИИ

    1. Hrachya:
      http://shashlicoff.ru

      Спасибо вам большое …

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