Меню для сайта с эффектом развертывания с помощью CSS3 RUDEBOXНаш сайт уделяет внимание множеству уроков по созданию навигации для сайта. Каждый сайт должен быть уникальным в своем роде. Это позволяет визуально запомнить ресурс, а если в нем есть какая-то изюминка, то сайт просто обречен на успех, конечно не стоит забывать об уникальности материала на сайте. В данном уроке мы решили рассмотреть еще одно, весьма интересное меню для сайта с эффектом развертывания. Ключевая особенность данной навигации состоит в том, что она сделана с помощью трансформаций css.

Следует обратить внимание, что меню будет работать только в браузерах webkit. Во всех остальных не будет достигнут эффект в полной мере. И так, приступим.

Шаг 1. HTML

Для начала нам необходимо создать простую разметку, для этого мы используем список, с надлежащими ему тегами.

С этим все достаточно просто, перейдем к следующему шагу.

Меню для сайта с эффектом развертывания с помощью CSS3 | RUDEBOX

Шаг 2. CSS

Нам необходимо создать трансформации, для эффектного отображения, с помощью свойства rotateY мы устанавливаем полувращения по оси Y. Свойство perspective применяется при трансформациях элемента, определяет расстояние в пикселях от плоскости дочерних элементов до точки из которой пользователь как бы смотрит на них.

Кроме этого perspective придает глубину изображению, в результате чего элементы, находящиеся для зрителя дальше будут казаться меньше, а находящиеся ближе — больше.

Шаг 3. JavaScript

Мы рассмотрим некоторые параметры, которые необходимы для демонстрации и не только.

Вот и все. Готово!

Читайте также: