Створіть анімований 3D Sidebar

18

Від автора: Крістіан Хайлманн (Christian Heilmann) з Mozilla – це затятий місіонер, який вміє і сказати, і підтвердити свої слова. У своєму блозі і чудовому Mozilla Hacks він часто створює відмінні демо-приклади . Одна з моїх улюблених штучок від Крістіана – це не демо, а використовуваний у нього в блозі ефект 3D бічної колонки. Я вирішив препарувати її, щоб показати вам, як він це робить!

Створіть анімований 3D Sidebar

Виявляється, Крістіан вже написав цей пост. Прочитайте у вільну хвилину!

HTML

Ефект бічної колонки залучені два елемента:

Батьківський елементи використовується тільки для перспективи CSS, яку ви побачите нижче.

CSS

Для нахилу бічної колонки використовується CSS transform, а для її анімації в плоску при проведенні мишею застосовується перехід:

.sidebar {
perspective: 800px;
}
.sidebar-rotater {
transform: rotateY(-25deg);
transition: transform 1s;
}
.sidebar-rotater:hover {
transform: rotateY(0deg);
}

Ступінь обертання бічної колонки виберіть самі, але постарайтеся з цим не переборщити, щоб не збити з пантелику користувачів.

Я вважаю, що унікальна бічна колонка Кріса додає його сайту відтінок елегантності. Це – блискучий приклад того, як зробити щось видатне, дотримуючись при цьому міру. Під час перегляду сайту Крістіана і його колонки в дії, виберіть час прочитати його пости – ви зрозумієте, чому в нашій галузі він блискучий фахівець.