Анимированное 3D Меню на CSS

CSS анимация может быть использована не только для создания затухающих или скользящих элементов, CSS3 анимация способна на многое другое.
Сегодня мы создадим простое, но удивительное 3D меню, которое вы сможете использовать в своих разработках!

Вот такое меню вы сможете вставить в ваш сайт за считанные минуты.

• Главная Главная Главная
• Пункт 1 Пункт 1 Пункт 1
• Пункт 2 Пункт 2 Пункт 2
• Пункт 3 Пункт 3 Пункт 3

Итак, начнем...

HTML код

HTML структура состоит из списка со ссылками, как и следовало ожидать от навигационного меню, однако, есть несколько дополнительных элементов <span> для создания 3D-эффекта:

<ul class="block-menu">
  <li>
    <a href="#" class="three-d">Главная
      <span aria-hidden="true" class="three-d-box">
        <span class="front">Главная</span>
        <span class="back">Главная</span>
      </span>
    </a>
   </li>
   <li>
     <a href="#" class="three-d">Пункт 1
	<span aria-hidden="true" class="three-d-box">
          <span class="front">Пункт 1</span>
          <span class="back">Пункт 1</span>
	</span>
    </a>
  </li>
  <li>
    <a href="#" class="three-d">Пункт 2
	<span aria-hidden="true" class="three-d-box">
	  <span class="front">Пункт 2</span>
	  <span class="back">Пункт 2</span>
	</span>
    </a>
  </li>
  <li>
    <a href="#" class="three-d">Пункт 3
	<span aria-hidden="true" class="three-d-box">
	  <span class="front">Пункт 3</span>
	  <span class="back">Пункт 3</span>
	</span>
    </a>
  </li>
	<!-- остальные пункты меню -->
</ul>

Наряду с основными элементами меню (внутри тэгов <a>), серии тэгов <span> используются для формирования «фронтальной» и «оборотной» поверхностей 3D окна во время анимации. Каждый из них должен иметь такое же название пункта меню, как и внутри тэга <a>.

CSS разметка

Вся анимация базируется на CSS эффектах transition и transform.

Внешний элемент внутри тэгов <a> неподвижен. Вложенные элементы внутри тэгов <span> - анимированы.
Каждый внутренний <span> инициализируется в свое положение и не меняется.

При наведении на них курсора, включается анимация CSS transform и CSS transition, вращающая их вперед и назад.

/* базовые стили меню */
.block-menu {
  display: block;
  background: #4ecac2; /* цвет подложки */
  }

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

.block-menu li a {
  color: #fff;
  display: block;
  text-decoration: none;
  font-family: inherit; /* здесь можно задать свой фонт */
  font-smoothing: antialiased;
  text-transform: uppercase;
  overflow: visible;
  line-height: 20px;
  font-size: 24px;
  padding: 15px 10px;
}

/* анимация */
.three-d {
  perspective: 200px;
  transition: all .07s linear;
  position: relative;
  cursor: pointer;
}
.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%;
}

.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: #237570; /* цвет подложки пунктов меню */
  padding: 15px 10px;
  color: white; /* цвет пунктов меню */
  pointer-events: none;
  box-sizing: border-box;
}

Никаких JavaScript или Flash не нужно для создания этого эффекта - только несколько простых CSS директив.
CSS3 это очень мощный инструмент для создания интересных визуальных эффектов достаточно простыми методами.

Остались вопросы? Или хотите получить что-то необычное?
Пишите нам на Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра. и мы вам обязательно поможем.