Заходи
Гость

Хостинг

Статистика
Яндекс.Метрика Счетчик PR-CY.Rank
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Ccылки

Свежак

Главная » 2013 » Сентябрь » 11 » АНИМИРУЕМ КНИГУ С ПОМОЩЬЮ СSS 3D
21:43
АНИМИРУЕМ КНИГУ С ПОМОЩЬЮ С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>

 

 

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

 

 

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

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

Статьи
[Менеджмент]
Факторы микросреды организации
[Безопасность систем]
Защита исходных текстов и двоичного кода
[Прогараммирование]
Разработка ПО с открытыми исходными текстами как особый вид прикладной науки
[Операционные системы]
Особенности применения технологий Lotus Domino и Notes в современных информационных системах
[Прогараммирование]
ЛЕКЦИЯ Процедуры и функции
[Менеджмент]
Факторы микросреды организации
[Безопасность систем]
Резервирование и восстановление
[Устронение ошибок систем]
Устранение неполадок при возникновении (синего экрана) Blue Screen Of Death (BSOD) (2)
[Прогараммирование]
Подпрограммы
[Устронение ошибок систем]
Сообщения об ошибках AMI BIOS (часть 2)

Категории
HTML/CSS [21]
jQuery/JS [36]
PHP [4]
Для Ucoz [38]

Популярный софт
Iron Kaspersky Internet Security 2015
Kaspersky Internet Security 2015
Iron Virtual DJ
Virtual DJ
Iron SoundForge 11
SoundForge 11
Iron Alcohol 120
Alcohol 120
Iron Norton Internet Security 2014
Norton Internet Security 2014
Iron Loaris Trojan Remover
Loaris Trojan Remover

Жми

Copyright MyCorp © 2018Конструктор сайтов - uCoz