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

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

Нам важно знать ваше мнение. Оставьте свой отзыв или ответ

Комментариев 0