Анимируем книги с помощью CSS 3D трансформаций

В этой статье мы хотим поделиться с вами креативными эффектами, которые можно применить для анимации книг с помощью CSS 3D трансформаций.

Мы будем работать с двумя типами книжных обложек: в твёрдом и мягком переплёте. В обоих случаях, мы позаботились о том, чтобы редактирование контента не вызывало больших проблем.

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

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

Книги в мягком переплёте

В сравнении с предыдущим обложками, данный тип проще: тут только обложка, обратная сторона и содержимое.

:HOVER EFFECTS

Ко всем объектам, применяется транзакция при наведении и отводке мыши. Это реализуется с помощью псевдо-класса :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>

Вот и всё!


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/k3N-E5LGx6U/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Анимируем книги с помощью CSS 3D трансформаций | | 2013-07-22 21:16:11 | | Статьи Web-мастеру | | В этой статье мы хотим поделиться с вами креативными эффектами, которые можно применить для анимации книг с помощью CSS 3D трансформаций.Мы будем работать с двумя типами книжных обложек: в твёрдом и | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: