Lecaw

Учимся создавать Web-сайты

Создание анимированной книги на CSS 3D transforms

July 22, 2013
CSS
2393hits

В этом обучающем уроке я покажу вам как создать анимированные книги на CSS 3D transforms и transitions. Я покажу Вам два типа оформления книг: Твердый переплет и мягкая обложка. Я сделал их такими, чтобы вы могли легко модифицировать их под свои нужды, используя CSS, изображения и некоторые дополнительные мелочи :)

ДЕМО Исходные файлы

 

Книга в твердом переплете

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

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

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

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

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

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>

ДЕМО Исходные файлы

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(1 Голосовать)

1 Комментарий

Оставить комментарий