ZorNet.Ru — сайт для вебмастера » HTML и CSS » Кнопка 3D с эффектами и анимацией на CSS3

Кнопка 3D с эффектами и анимацией на CSS3

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

По умолчанию можно написать, как пример "Скачать" но как только вы наведете, то автоматически происходит разворот и появляется другая сторона. Что изначально немного темнее, где визуально красиво смотрится. И вот как раз на ней можно поставить, что сколько весит файл, так как в коде все для этого идет отдельно, главное правильно операторы выставить.

Эти эффекты будут работать на всех современных браузерах, если у кого то не покажет, то стоит его обновить. Как можно заметить, что 3D-преобразования на CSS3 быстро становятся популярным вариантом для добавления глубины и интерактивности в интернет ресурсе. Существует множество способов создания 3D-графики в HTML, но если решили сменить палитру цвета или увеличить, то все делается в CSS, где нужно проводить настройку.

Так по умолчанию смотрится:

Здесь видим как начинает срабатывать эффект поврота.

Как создать впечатляющую 3D графику в CSS3

Приступаем к установке:

HTML

Код

<div class="gukoplatenka-container gukoplatenka-gulothoug_always-tilopam_renshots">
  <div class="brandusi_persona brandusi_persona-gulothoug_always-tilopam_renshots">
  <div class="gukoplatenka front">
  <a href="http://zornet.ru/load/svetlyj_slajder_kontenta_pri_pomoshhi_html_i_css/145-1-0-8642">Здесь сайт</a>
  </div>
  <div class="gukoplatenka gukoplatenka-3d back">
  <a href="Ссылка продублированная" target="_blank">ZORNET.RU</a>
  </div>
  </div>
  </div>

CSS

Код

.gukoplatenka-container {
  display: inline-block;
  cursor: pointer;
  font-weight: 500;
  letter-spacing: 1px;
  height: 55px;
  width: 251px;
  -webkit-perspective: 700;
  -ms-perspective: 700;
  perspective: 700;
}

.gukoplatenka-container .brandusi_persona {
  transition: all 0.5s cubic-bezier(0.42, 0, 0.35, 0.93);
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
}

.gukoplatenka-container .gukoplatenka {
  height: 55px;
  width: 251px;
  border-radius: 1px;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  -webkit-box-shadow: 1px 2px 4px -1px rgba(80, 79, 79, 0.66);
  box-shadow: 1px 2px 4px -1px rgba(78, 78, 78, 0.72);
}

.gukoplatenka-container .gukoplatenka.front {
  z-index: 10;
}

.gukoplatenka-container .gukoplatenka.back {
  color: #fdf7f7;
  font-size: 19px;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 0 #171515
}

.gukoplatenka a, .gukoplatenka a:hover {
  color: #f7f2f2;
text-shadow: 0 1px 0 #1b1a1a;
}

.gukoplatenka-gulothoug_always-tilopam_renshots .brandusi_persona-gulothoug_always-tilopam_renshots {
  transform-origin: 100% 28px;
}

.gukoplatenka-gulothoug_always-tilopam_renshots .front {
  transform: translateZ(28px);
  background-image: linear-gradient(90deg, #5c45da, #5a45c7);
  font-size: 21px;
  text-align: center;
  font-weight: 700;
  height: 57px;
  color: #f7f1f1;
}

.gukoplatenka-gulothoug_always-tilopam_renshots .back {
  -webkit-transform: rotateX(90deg) rotateZ(180deg) rotateY(180deg) translateZ(28px);
  -ms-transform: rotateX(90deg) rotateZ(180deg) rotateY(180deg) translateZ(28px);
  transform: rotateX(90deg) rotateZ(180deg) rotateY(180deg) translateZ(28px);
  background-image: linear-gradient(90deg, #5e35b9, #7d52d8);
  text-align: center;
  height: 56px;
}

.gukoplatenka-gulothoug_always-tilopam_renshots:hover .brandusi_persona-gulothoug_always-tilopam_renshots {
  transform: rotateX(90deg);
}

.fadeInDownSwing {
  -moz-animation-name: fadeInDownSwing;
  -webkit-animation-name: fadeInDownSwing;
  animation-name: fadeInDownSwing;
  animation-fill-mode: both;
}

@-moz-keyframes fadeInDownSwing {
  0% {
  opacity: 0;
  -moz-transform: translate3d(-5%, -100%, 0);
  transform: translate3d(-5%, -100%, 0);
  }
  to {
  opacity: 1;
  -moz-transform: none;
  transform: none;
  }
}

@-webkit-keyframes fadeInDownSwing {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(-5%, -100%, 0);
  transform: translate3d(-5%, -100%, 0);
  }
  to {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
}

@keyframes fadeInDownSwing {
  0% {
  opacity: 0;
  transform: translate3d(-5%, -100%, 0);
  }
  to {
  opacity: 1;
  transform: none;
  }
}

.slideInUp {
  -moz-animation-name: slideInUp;
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  animation-fill-mode: both;
}

@-moz-keyframes slideInUp {
  0% {
  opacity: 0;
  -moz-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  }
  to {
  opacity: 1;
  -moz-transform: none;
  transform: none;
  }
}

@-webkit-keyframes slideInUp {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  }
  to {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
}

@keyframes slideInUp {
  0% {
  opacity: 0;
  transform: translate3d(0, 100%, 0);
  }
  to {
  opacity: 1;
  transform: none;
  }
}

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #93bfe2;
  background: -webkit-linear-gradient(left, #4d78e0, #5553dc);
  background: -moz-linear-gradient(right, #4671d6, #544cda);
  background: linear-gradient(right, #4b77e0, #5750d6);
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 3px;
}

.dark .pace .pace-progress {
  background: #f9f3f3;
}

Для создание 3D-форм, здесь использовали HTML и CSS, что JavaScript здесь не нужен для работоспособности.

Демонстрация

30 Апреля 2018 Просмотров: 1629 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0