Создаем анимированные 3D книги с помощью CSS | RUDEBOXВам необходимо стилизовать креативно текст на сайте, при этом возникла задача реализовать это в виде книг, такой вариант возможен, если вы разрабатываете книжную лавку, или личное портфолио с биографией, кроме этого в книге будет присутствовать кнопка загрузить, которая будет по умолчанию скрыта, при наведении курсора книга будет разворачиваться с помощью плавной анимации. Мы рассмотрим два варианта отображение книг: в переплете и мягкой обвертке. Кроме этого во втором примере будет изменен не много вид анимации, но и стилизация кнопки в виде записи.

Все это выглядит достаточно эффектно. В отличие от твердой обложки, книга в мягкой обложке немного проще в создании. Она изготовлена из плоской поверхности, например, из страниц и не имеет корешок: Мягкая обложка спереди и мягкая обложка сзади.

Шаг 1. HTML

Дизайн обложки довольно прост; мы добавили класс «coverDesign» в качестве первоначальной конфигурации и второй класс для фона или изображения. Альтернативное размещение изображения на обложке выглядит следующим образом:

 Чтобы добавить небольшую красную ленту на переднем переплете, просто добавьте:

С разметкой все понятно, переходим к следующему шагу.

Создаем анимированные 3D книги с помощью CSS | RUDEBOX

Шаг 2. CSS

Для обеих книг мы будем использовать технику переходов “hover on” и “hover off”, которые можно создать, просто определив «наведение курсора на заголовок» с классом :hover.

Когда мы открываем книгу, изменяется значение z-index: 100 в значение 0. Страницы имеют разную длительность перехода, благодаря которому происходит плавное открытие.

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

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

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