Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Рекомендуем



Главная » 2013 » Сентябрь » 11 » АНИМИРУЕМ КНИГУ С ПОМОЩЬЮ СSS 3D


21:49
АНИМИРУЕМ КНИГУ С ПОМОЩЬЮ СSS 3D

АНИМИРУЕМ КНИГУ С ПОМОЩЬЮ С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>

 

 

СМОТРЕТЬ ДЕМО                   СКАЧАТЬ ИСХОДНИК

 

 

Ссылка на источник

Категория: CSS//HTML//JS | Просмотров: 430 | Добавил: Iron | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация
  • Читаемое

    Категории

    Заходи не жди