Анимируем книги с помощью 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>

Вот и всё!

Обратите внимание, что это работает только в браузерах, которые поддерживают CSS 3D-преобразования. Также отметим, что IE10 не поддерживает 3D, которая необходима для этой демонстрации.

  • FalleN

  • 3364

  • 1

  • 239
Теги: Transition, Perspective, 3D

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!