Эффект кнопки HTML5 Cool 3D Cube

[Скопировать ссылку]
admin Опубликовано 13-11-2018 02:58:18 | Показать все сообщения |Режим чтения Печать Назад Вперед
Эффект кнопки HTML5 Cool 3D Cube

Краткое описание

Это очень классный эффект кнопки куба HTML5 и CSS3 3D. Эффект этой кнопки заключается в том, что, когда мышь перекатывается над кнопкой, кнопка будет повернута 3D на другую поверхность для отображения различного содержимого.

Совместимость
Поделиться:


Это очень классный эффект кнопки куба HTML5 и CSS3 3D. Эффект этой кнопки заключается в том, что, когда мышь перекатывается над кнопкой, кнопка будет повернута 3D на другую поверхность для отображения различного содержимого.

Как использовать
Структура HTML
Кнопка 3D-куба использует следующую структуру HTML:
  1. <figure>
  2.   <div>
  3.     <span class="face">Hover Me</span>
  4.     <span class="face">Button</span>
  5.   </div>
  6. </figure>  
Скопировать код
Стиль CSS
Код CSS, который реализует эффект кнопки 3D-куба, выглядит следующим образом:
  1. figure {
  2.   width: 200px;
  3.   height: 60px;
  4.   margin: 50px auto;
  5.   cursor: pointer;
  6.   perspective: 500px;
  7.   -webkit-perspective: 500px;
  8. }

  9. figure div {
  10.   height: 100%;
  11.   transform-style: preserve-3d;
  12.   -webkit-transform-style: preserve-3d;
  13.   transition: 0.25s;
  14.   -webkit-transition: 0.25s;
  15. }

  16. figure:hover div {
  17.   transform: rotateX(-90deg);
  18. }

  19. span.face {
  20.   width: 100%;
  21.   height: 100%;
  22.   position: absolute;
  23.   box-sizing: border-box;
  24.   border: 5px solid #fff;
  25.   font-family: 'Source Sans Pro',sans-serif;
  26.   line-height: 50px;
  27.   font-size: 17pt;
  28.   text-align: center;
  29.   text-transform: uppercase;
  30. }

  31. span.face:nth-child(1) {
  32.   color: #fff;
  33.   transform: translate3d(0, 0, 30px);
  34.   -webkit-transform: translate3d(0, 0, 30px);
  35. }

  36. span.face:nth-child(2) {
  37.   color: #094b2c;
  38.   background: #fff;
  39.   transform: rotateX(90deg) translate3d(0, 0, 30px);
  40.   -webkit-transform: rotateX(90deg) translate3d(0, 0, 30px);
  41. }              
Скопировать код


Сообщение слишком большое

Для просмотра Вам необходимо авторизироваться.
Если Вы еще не зарегистрированы, перейдите по ссылке: Регистрация.

x
Ответить

Магия Жалоба

Чтобы ответить, вам надо авторизироваться в системе Вход | Регистрация

Правила начислений  Разрешить ответные письма, чтобы напомнить автору

Сектор творческих людей
Горячая линия

638638758

С понедельника по воскресенье с 9:00 до 23:00

Обратной связь

admin@artace.ru Онлайн

QR-код

Powered by Discuz! X3.4© 2001-2018 Comsenz Inc.