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