Как говорится, начнем с начала! А рассказывать буду о верстке классных кубических кнопок. Специально для данного урока подключил подсветку кода на сайт, так что you are welcome!
Давайте сразу начнем с результата работы. https://jsfiddle.net/t59o2rso/
Демо
Начинаем с идеи
А идея заключается в создании ощущения трехмерного пространства за счет вращения кнопки вокруг оси абсцисс (X). Если вообразить кнопку в виде трехмерного бруса и представить как он поворачивается на 90 градусов, то мы увидим две его грани. Следовательно потребуется два html элемента для отображения этих граней. Чтобы достичь эффекта трехмерности и вращения понадобятся css3 свойства.
Две грани куба представляют собой кнопку так что обернем их в div с классом btn-cube_button
А для достижения эффекта трехмерности и анимации css3 предоставляет специальные свойства.
transform-style: preserve-3d; transition: all 0.3s ease 0s; transform-origin: 50% 0 0;
Первое свойство, - transform-style создает внутри тега которому присвоено трехмерное пространство. Второе свойство, - transition задает правила анимации. И последнее свойство, - transform-origin смещает ось абсцисс (X) к верхней границе нашей кнопки (это ось вокруг которой будет вращаться кнопка).
Теперь когда вращающаяся часть готова нужно подумать о запуске нашей анимации. Запуск будет происходить по наведения (hover). Здесь существует первый нюанс. Нельзя повесить правила наведения прямо на <div class="btn-cube_button"> потому что в процессе трансформации дочерние элементы изменяются в размере. В итоге будет получено некорректное поведение в некоторых браузерах. Решит эту проблема обертка вокруг кнопки.
btn-cube
btn-cube__wraper
btn-cube__button
btn-cube__btn-def
btn-cube__btn-act
В итоговом HTML помимо описанных выше элементов есть специальные бамперы btn-cube__bumper. Они нужны для устранения "дергатни" кнопки при попадании мыши на верхнюю или нижнюю границу кнопки и по большому счету не обязательны к использованию.
и ссылка на сайт для вдохновения, как можно применить данный эффект http://livedemo00.template-help.com/joomla_51399/
Теперь когда вращающаяся часть готова нужно подумать о запуске нашей анимации. Запуск будет происходить по наведения (hover). Здесь существует первый нюанс. Нельзя повесить правила наведения прямо на <div class="btn-cube_button"> потому что в процессе трансформации дочерние элементы изменяются в размере. В итоге будет получено некорректное поведение в некоторых браузерах. Решит эту проблема обертка вокруг кнопки.
Опишем компонент по БЭМ
Определившись с идеей легко описать кнопку в html. Назовем компонент btn-cube, внутри него находится первый компонент - обертка btn-cube__wraper, внутри обертки сама конпка btn-cube__button и еще глубже грани кнопки btn-cube__btn-def и btn-cube__btn-act.btn-cube
btn-cube__wraper
btn-cube__button
btn-cube__btn-def
btn-cube__btn-act
В итоговом HTML помимо описанных выше элементов есть специальные бамперы btn-cube__bumper. Они нужны для устранения "дергатни" кнопки при попадании мыши на верхнюю или нижнюю границу кнопки и по большому счету не обязательны к использованию.
Добавим CSS
Перед тем как показать итоговый css осталось отметить одну деталь. Как уже было сказано ранее, специальное свойство css3 transform-style: preserve-3d создает внутри контейнера 3d пространство. Для правильного отображения нашего куба нужно поместить одну грань под другой и нижнюю грань повернуть на 90 градусов. Таким образом она станет невидимой до тех пор пока куб не начнет поворачиваться..btn-cube .btn-cube__btn-act { background: #000 none repeat scroll 0 0; color: #fff; left: 0; position: absolute; top: 100%; transform: rotateX(-90deg); transform-origin: 50% 0 0; }
Итоговый HTML и CSS
HTML:CSS:
.btn-cube { display: inline-block; position: relative; } .btn-cube__bumper { position: absolute; z-index: 1000; } .btn-cube__bumper-bottom { background: transparent; height: 6px; left: 0; right: 0; } .btn-cube__bumper-top { background: transparent; height: 6px; left: 0; right: 0; top: -6px; } .btn-cube__wraper { display: inline-block; cursor: pointer; } .btn-cube__button { display: inline-block; position: relative; transform: rotateX(0deg) translateY(0%); transform-style: preserve-3d; transition: all 0.3s ease 0s; transform-origin: 50% 0 0; } .btn-cube > .btn-cube__wraper > .btn-cube__button > .btn-cube__btn { padding: 10px 15px; display: inline-block; cursor: pointer; } .btn-cube .btn-cube__btn-def { transform: rotateX(0deg); background: #fff; color: #000; } .btn-cube .btn-cube__btn-act { background: #000 none repeat scroll 0 0; color: #fff; left: 0; position: absolute; top: 100%; transform: rotateX(-90deg); transform-origin: 50% 0 0; } .btn-cube__wraper:hover > .btn-cube__button, .btn-cube.btn-cube__active > .btn-cube_wraper { transform: rotateX(90deg) translateY(-50%); }
В заключении
Ссылка на полный код https://jsfiddle.net/t59o2rso/и ссылка на сайт для вдохновения, как можно применить данный эффект http://livedemo00.template-help.com/joomla_51399/