АНИМИРУЕМ КНИГУ С
ПОМОЩЬЮ СSS 3D
В этой статье мы хотим поделиться с вами креативными
эффектами, которые можно применить для анимации книг с помощью CSS 3D
трансформаций.
Мы будем работать с двумя типами книжных обложек: в твёрдом
и мягком переплёте. В обоих случаях, мы позаботились о том, чтобы
редактирование контента не вызывало больших проблем.
DEMO СКАЧАТЬ
ИСХОДНИК
Книги в твёрдом переплёт
Книги в твёрдом переплёте состоят из трёх частей: обложка,
обратная сторона и место переплёта. Каждая из данных частей использует
специальные псевдо-классы для обеспечения толщины.
Книги в мягком переплёте
Ко всем объектам, применяется транзакция при наведении и
отводке мыши. Это реализуется с помощью псевдо-класса :hover.
Приближение мыши
Когда книга раскрывается, позиция обложки изменяется от
"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;
}
|
Отдаление мыши
При закрытии книги, поворачиваем процесс в обратную сторону.
|
.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>
|
СМОТРЕТЬ ДЕМО СКАЧАТЬ
ИСХОДНИК
Ссылка
на источник
| 
