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

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

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

демо

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

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);
}

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

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

Автор: David Walsh

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree