HTML
В эффект боковой колонки вовлечены два элемента:
<div class="sidebar">
<div class="sidebar-rotater">
<!-- sidebar content -->
</div>
</div>
Родительский элементы используется только для перспективы CSS, которую вы увидите ниже.
CSS
Для наклона боковой колонки используется CSS transform, а для ее анимации в плоскую при проведении мышью применяется переход:
.sidebar {
perspective: 800px;
}
.sidebar-rotater {
transform: rotateY(-25deg);
transition: transform 1s;
}
.sidebar-rotater:hover {
transform: rotateY(0deg);
}
Степень вращения боковой колонки выберите сами, но постарайтесь с этим не переборщить, чтобы не сбить с толку пользователей.
Я считаю, что уникальная боковая колонка Криса добавляет его сайту оттенок элегантности. Это – блестящий пример того, как сделать что-то выдающееся, соблюдая при этом меру. Во время просмотра сайта Кристиана и его колонки в действии, выберите время прочесть его посты – вы поймете, почему в нашей отрасли он блестящий специалист.