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

Всегда в теме

Статистика


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

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

Свежий софт


Wrecker Kaspersky Internet Security 2015
Kaspersky Internet Security 2015
Wrecker Virtual DJ
Virtual DJ
Wrecker SoundForge 11
SoundForge 11
Wrecker Alcohol 120
Alcohol 120
Wrecker Norton Internet Security 2014
Norton Internet Security 2014
Iron Loaris Trojan Remover
Loaris Trojan Remover

Рекомендуем



Главная » 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 | Просмотров: 698 | Добавил: Iron | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

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

    • Читаемое

    Категории

    Заходи не жди

    Web Template created with Artisteer.