3D аккордеон на CSS3

Have a question? Ask in chat with AI!

3D аккордеонМеню с использование аккордеона стали очень популярны с появлением Web 2.0. Основная задача таких меню повысить юзабилити сайтов, на которых они применяются. Это особенно важно когда осуществляется создание корпоративного сайта. Суть аккордеона в том, что вы получаете доступ сразу к большому количеству информации, но при этом сильно экономится пространство на сайте. Готовых вариантов масса. Вот к примеру один, который я приводил в обучающей статье по jQuery.
[adsense] Сегодня же мы будем немного экспериментировать со свойствами CSS3, которые поддерживаются только в webkit браузерах.

Посмотреть демо

Структура HTML

HTML код очень прост. Мы имеем один блок div, внутри которого располагаются 4 части, каждая из которых задана тегом <article>. Внутри содержится заголов, изображение и текст.

Section 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Section 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Section 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Section 4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Если вы живете в Астрахани и ищите где бы разместить объявление, то вам на сайт http://ast.slando.ru/astrakhan/, где вы найдете все бесплатные объявления Астрахани.

Структура CSS

#accordion {
      margin: 100px;
   }
   #accordion article {
      -webkit-transform: perspective(900px) rotateY(60deg);
      -webkit-transition: all 0.7s ease-in-out;
      background: #fff;
      border: 1px solid #f3f3f3;
      box-shadow: 0px 5px 15px gray;
      float: left;
      height: 420px;
      margin-left: -180px;
      padding: 20px;
      width: 220px;
   }
   #accordion article:first-child {
      margin-left: 0px;
   }
   #accordion article img {
      float: left;
      padding: 0 10px 5px 0;
   }
   #accordion article:hover {
      -webkit-transform: perspective(0) rotateY(-10deg);
      margin: 0 140px 0 -60px;
   }

Для начала зададим элементу аккордеон отступ в 100px. Это даст свободное пространство для нашей анимации. Далее, используем свойство -webkit-transform для создания перспективы в 900px и поворота на 60 градусов. Так же добавим отрицательный отступ слева в 180px дабы приблизить их друг к другу. Используем пседво-класс :first-child чтобы убрать отрицательный отступ у первого элемента.

Добавим анимацию с помощью свойства transition со значением 0.7 секунд. Это создаст приятный эффект выезда секции нашего аккордеона. Чтобы наша анимация выглядела законченной, необходимо добавить событие при наведении курсора мыши на один из секторов. Делать мы это будем используя псевдо-класс :hover и сменим перспективу на 0, а поворот на -10 градусов.

[info]Стоит заметить, что данный пример будет работать только в webkit браузерах (Chrome, Safari). Свойство -webkit-transform: perspective() rotateY() является экспериментальным, но возможно в ближайшем будущем будет включено в официальную спецификацию и поддержка браузерами будет расширена.[/info]

Посмотреть демо


2 комментария для “3

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Предыдущая запись Очередное обновление дизайна Google
Следующая запись CSS: как сменить цвет выделения текста в современных браузерах