От автора: Кристиан Хайлманн (Christian Heilmann) из Mozilla – это ярый миссионер, который умеет и сказать, и подтвердить свои слова. В своем блоге и великолепном Mozilla Hacks он часто создает отличные демо-примеры . Одна из моих любимых штучек от Кристиана – это не демо, а используемый у него в блоге эффект 3D боковой колонки. Я решил препарировать ее, чтобы показать вам, как он это делает!
Оказывается, Кристиан уже написал этот пост. Прочтите в свободную минуту!
HTML
В эффект боковой колонки вовлечены два элемента:
|
1 2 3 4 5 |
<div class="sidebar"> <div class="sidebar-rotater"> <!-- sidebar content --> </div> </div> |
Родительский элементы используется только для перспективы CSS, которую вы увидите ниже.
CSS
Для наклона боковой колонки используется CSS transform, а для ее анимации в плоскую при проведении мышью применяется переход:
|
1 2 3 4 5 6 7 8 9 10 11 |
.sidebar { perspective: 800px; } .sidebar-rotater { transform: rotateY(-25deg); transition: transform 1s; } .sidebar-rotater:hover { transform: rotateY(0deg); } |
Степень вращения боковой колонки выберите сами, но постарайтесь с этим не переборщить, чтобы не сбить с толку пользователей.
Я считаю, что уникальная боковая колонка Криса добавляет его сайту оттенок элегантности. Это – блестящий пример того, как сделать что-то выдающееся, соблюдая при этом меру. Во время просмотра сайта Кристиана и его колонки в действии, выберите время прочесть его посты – вы поймете, почему в нашей отрасли он блестящий специалист.
Автор: David Walsh
Источник: ttp://davidwalsh.name/
Редакция: Команда webformyself.
