Анимированные обложки книг при помощи CSS 3D Transforms

Анимированный обложки книг при помощи CSS 3D Transforms

В этой статье мы покажем вам как создать креативные, анимированные книги при помощи CSS 3D преобразований и переходов.

Мы создадим два варианта книжного оформления: с твердым переплетом и мягкой обложкой. Оба примера были сделаны так, чтобы можно было легко их изменять, используя CSS, изображения, ссылки и некоторые мелкие детали :)

Пожалуйста, обратите внимание: это будет работать как задумано только в браузерах, которые поддерживают соответствующие свойства CSS.

Твердая обложка книги

Твердая обложка книги

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

Твердая обложка книги

Книга в мягкой обложке

книга в мягкой обложке

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

Эффект при наведении мыши

Для обеих книг я использую технику перехода с "hover on" к "hover off", которое достигается просто определением переходов "hover on" в классе с :hover и переходов "hover off" в основном классе соответствующего элемента.

hover on

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

.book:hover > .hardcover_front {
    transform: rotateY(-145deg) translateZ(0);
    z-index: 0;
}
 
.book:hover > .page li:nth-child(1) {
    transform: rotateY(-30deg);
    transition-duration: 1.5s;
}
 
.book:hover > .page li:nth-child(2) {
    transform: rotateY(-35deg);
    transition-duration: 1.8s;
}
 
.book:hover > .page li:nth-child(3) {
    transform: rotateY(-118deg);
    transition-duration: 1.6s;
}
 
.book:hover > .page li:nth-child(4) {
    transform: rotateY(-130deg);
    transition-duration: 1.4s;
}
 
.book:hover > .page li:nth-child(5) {
    transform: rotateY(-140deg);
    transition-duration: 1.2s;
}

hover off

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

.hardcover_front{
    transition: all 0.8s ease, z-index 0.6s;
}
 
.page > li {
    width: 100%;
    height: 100%;
    transform-origin: left center;
    transition-property: transform;
    transition-timing-function: ease;
}
 
.page > li:nth-child(1) {
    transition-duration: 0.6s;
}
 
.page > li:nth-child(2) {
    transition-duration: 0.6s;
}
 
.page > li:nth-child(3) {
    transition-duration: 0.4s;
}
 
.page > li:nth-child(4) {
    transition-duration: 0.5s;
}
 
.page > li:nth-child(5) {
    transition-duration: 0.6s;
}

Дизайн обложки

Дизайн обложки довольно прост; я добавил класс "coverDesign" в первоначальной конфигурации и второй класс для фона или изображения (см. исходники).

Альтернатива размещения изображения на обложке выглядит следующим образом:

<img src="" width="100%" height="100%"> </img>

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

<span class="ribbon"> </span>

И вот и всё! Я надеюсь, что этот пример будет вам полезен!

Демонстрация

Скачать исходные файлы

Перевод статьи с http://tympanus.net/codrops/


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

    You have no rights to post comments