Создайте анимированный 3D Sidebar

Создайте анимированный 3D Sidebar

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

демо

Оказывается, Кристиан уже написал этот пост. Прочтите в свободную минуту!

HTML

В эффект боковой колонки вовлечены два элемента:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Родительский элементы используется только для перспективы CSS, которую вы увидите ниже.

CSS

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

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

Я считаю, что уникальная боковая колонка Криса добавляет его сайту оттенок элегантности. Это – блестящий пример того, как сделать что-то выдающееся, соблюдая при этом меру. Во время просмотра сайта Кристиана и его колонки в действии, выберите время прочесть его посты – вы поймете, почему в нашей отрасли он блестящий специалист.

Автор: David Walsh

Источник: ttp://davidwalsh.name/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки: ,

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

Комментарии Вконтакте:

Комментарии Facebook:

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