—»     —»   Анимированное трехмерное меню на CSS
  Раздел: Меню и Навигация   Нет комментариев  

Анимированное трехмерное меню на CSS



CSS-анимации помогают нам реализовать не только простые эффекты скольжения или затемнения. CSS-анимации в наши дни способны на гораздо большее. Мы уже рассказывали вам о том, как создать взрывающийся логотип (разработанный при помощи javascript, но с анимацией на CSS), анимированный фото-сток, а также о некоторых других трехмерных CSS3-эффектах. Сегодня мы хотим рассказать вам о создании простого, но очень необычного трехмерного переворачивающегося меню!

Анимированное трехмерное меню на CSS

* Смотреть демо

HTML-код

HTML-структура состоит из списка ссылок, как и во всех навигационных меню. Тем не менее, здесь у нас будет несколько дополнительных span-элементов для реализации трехмерного эффекта:

<ul class="block-menu">
<li><a href="/" class="three-d">
Home
<span aria-hidden="true" class="three-d-box">
<span class="front">Home</span>
<span class="back">Home</span>
</span>
</a></li>
<li><a href="/demos" class="three-d">
Demos
<span aria-hidden="true" class="three-d-box">
<span class="front">Demos</span>
<span class="back">Demos</span>
</span>
</a></li>
<!-- more items here -->
</ul>

Кроме основного элемента A, несколько span-элементов используются для представления «передней» и «задней» сторон трехмерного блока в процессе анимации. Каждой нужно задать тот же текст, что и элементу A.

CSS-код

Анимация будет построена на переходах и трансформациях. Сам A-элемент не будет двигаться – будет двигаться родительский span-элемент. Каждый внутренний Span будет инициализироваться на своей позиции и не будет изменяться. Каждый элемент будет двигаться вверх и вниз при помощи CSS-трансформаций и CSS-переходов. Один будет поворачиваться задней стороной, а все остальные – наоборот.

/* basic menu styles */
.block-menu {
display: block;
background: #000;
}

.block-menu li {
display: inline-block;
}

.block-menu li a {
color: #fff;
display: block;
text-decoration: none;
font-family: 'Passion One', Arial, sans-serif;
font-smoothing: antialiased;
text-transform: uppercase;
overflow: visible;
line-height: 20px;
font-size: 24px;
padding: 15px 10px;
}

/* animation domination */
.three-d {
perspective: 200px;
transition: all .07s linear;
position: relative;
cursor: pointer;
}
/* complete the animation! */
.three-d:hover .three-d-box,
.three-d:focus .three-d-box {
transform: translateZ(-25px) rotateX(90deg);
}

.three-d-box {
transition: all .3s ease-out;
transform: translatez(-25px);
transform-style: preserve-3d;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}

/*
put the "front" and "back" elements into place with CSS transforms,
specifically translation and translatez
*/
.front {
transform: rotatex(0deg) translatez(25px);
}

.back {
transform: rotatex(-90deg) translatez(25px);
color: #ffe7c4;
}

.front, .back {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: black;
padding: 15px 10px;
color: white;
pointer-events: none;
box-sizing: border-box;
}

Для некоторых CSS-параметров понадобятся браузерные префиксы.

Если вы хотите понять, каким образом перемещаются задние и передние элементы (а мы настоятельно вам рекомендуем вам это сделать), выставите одному из них параметр display: none, и наведите на элемент, чтобы понять, что и какую роль играет в анимации.

* Смотреть демо

Единственный минус данной техники заключается в повторяющемся ярлыке меню. С технической точки зрения его довольно несложно повторить, но может случиться так, что пользователи экранного доступа услышат текст три раза, даже если будет включена опция aria-hidden="true". Визуальный эффект, тем не менее, невероятен сам по себе. Никакого javascript, Flash или Canvas – просто несколько CSS строк. CSS-анимации… даже не знаем, как нам их благодарить.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, 3D
Опубликовал Design FactoRy   Прочитано (раз): 6824   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Ночные сорочки женские
У нас много ночных сорочек из шелка, хлопка, модала, искусственного шелка
viksipol.ru
Бокалы Ридель купить
по лучшей цене в России. Гарантия. Бесплатная доставка по Москве!
winegadgets.ru
Установка розеток и выключателей цена
Электростанции и силовые установки. Установка оборудования безопасности
monolitkompani.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930