3DM-студия
» » » Анимированное трехмерное меню на CSS

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

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


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

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-анимации… даже не знаем, как нам их благодарить.


Скачивание доступно только для зарегистрированных
НАШИ НОВОСТИ
Опубликовано 04 апрель 2014
Представляю вашему вниманию шаблон онлайн кинотеатра с глубокой настройкой под свои нужны OST-ARENA.RU Читать далее...
Опубликовано 18 март 2014
Представляю вашему вниманию, адаптивный новостной шаблон Reades News. Адаптивный дизайн подразумевает, что шаблон будет одинаково корректно отображаться во всех устройствах. Шаблон отлично подойдет для медийных новостей и не только. Обязательно посмотрите видеозапись работы Читать далее...
Опубликовано 16 март 2014
Дизайн Zerotheme, адаптирован для DLE 10.1 by Yurets. Шаблон zBoomMusic позиционируется как шаблон для музыкального портала или музыкального блога. Вверху шаблона расположен слайдер, под слайдером Топ новостей, далее последние добавленные новости. Читать далее...