Сегодня мы создадим простое, но удивительное 3D меню, которое вы сможете использовать в своих разработках!
Вот такое меню вы сможете вставить в ваш сайт за считанные минуты.
Итак, начнем...
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 для просмотра. и мы вам обязательно поможем.