ZorNet.Ru — сайт для вебмастера » HTML и CSS » Flip Hover эффект переворота на CSS

Flip Hover эффект переворота на CSS

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

В статье мы собираемся поделиться HTML и CSS-кодом для создания эффектов всплывающих подсказок при наведении изображения. Перелистывание изображения при наведении мыши можно создать с помощью преобразования масштабирования CSS3. Этот учебник очень прост, и этот эффект может быть легко создан с использованием нескольких строк кода.

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

При открытие страницы на сайте:

Flip (переворот) эффект на чистом CSS

Здесь при наведение происходит разворот:

Создаем анимацию переворота в CSS

Установка:

HTML

При открытие можно наблюдать блок с ключевым словом, но при нажатие появляется тени, и после как сделали клик, то происходит поворот.

Код

<div class="kelongcandes-veconguden">
  <label>
  <input type="checkbox">
  <div class="kudaneg senguden">
  <div class="kafecasun">ZOTNET.RU</div>
  <div class="detupog">
Интересные решения для вебмастера в создание и продвижение сайтов.
  </div>
  </div>
  </label>
  <label>
  <input type="checkbox">
  <div class="kudaneg logedonamus">
  <div class="kafecasun">Скрипты</div>
  <div class="detupog">
Здесь идет второе описание под цветовой гамме.
  </div>
  </div>
  </label>
  <label>
  <input type="checkbox">
  <div class="kudaneg potedsaxub">
  <div class="kafecasun">Дизайн</div>
  <div class="detupog">
Основная фактура, которая отлично подойдет на сайт.
  </div>
  </div>
  </label>
  <label>
  <input type="checkbox">
  <div class="kudaneg pusecing">
  <div class="kafecasun">HTML И CSS</div>
  <div class="detupog">
Коды и скрипты со стилистикой для создание сайта.
  </div>
  </div>
  </label>
</div>

CSS

Вот как рас уже с разворота, как видим, что здесь просто название, так, что сами мождеьте представить что можно добавить для оформление.

Код

.kelongcandes-veconguden {
  max-width: 90%;
  height: 100vh;
  margin: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
}
label {
  perspective: 785px;
}
input {
  position: absolute;
  visibility: hidden;
}
.kudaneg {
  margin: 15px;
  width: 295px;
  height: 118px;
  background: #151414;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
  cursor: pointer;
}
.kudaneg div {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 18px;
  backface-visibility: hidden;
  border-radius: 3px;
}
.detupog {
  transform: rotateY(180deg);
  font: 300 14px/20px 'Raleway', sans-serif;
  text-transform: none;
  letter-spacing: 0;
}

/* SHADOWS */
.senguden .kafecasun, .senguden .detupog { box-shadow: 0 0 5px #0edada; }
.logedonamus .kafecasun, .logedonamus .detupog { box-shadow: 0 0 5px #d843e2; }
.potedsaxub .kafecasun, .potedsaxub .detupog { box-shadow: 0 0 5px #c0ea14; }
.pusecing .kafecasun, .pusecing .detupog { box-shadow: 0 0 5px #f6f7f1;}

/* ACTIONS */
input:checked + .kudaneg { transform: rotateY(180deg); }

.senguden .kafecasun:hover { animation: senguden 1s ease-in-out infinite alternate; }
.logedonamus .kafecasun:hover { animation: logedonamus 1s ease-in-out infinite alternate; }
.potedsaxub .kafecasun:hover { animation: potedsaxub 1s ease-in-out infinite alternate; }
.pusecing .kafecasun:hover { animation: pusecing 1s ease-in-out infinite alternate; }

/* ANIMATIONS */
@keyframes senguden {
  0% {
  box-shadow: 0 0 5px rgba(6, 241, 241);
  transform: scale(1)
  }
  100% {
  box-shadow: 0 0 20px rgba(16, 243, 243, 0.8);
  transform: scale(1.01)
  }
}
@keyframes logedonamus {
  0% {
box-shadow: 0 0 5px rgba(243, 14, 243);
  transform: scale(1)
  }
  100% {
  box-shadow: 0 0 20px rgba(243, 12, 243, 0.8);
  transform: scale(1.01)
  }
}
@keyframes potedsaxub {
  0% {
  box-shadow: 0 0 5px rgba(236, 236, 11);
  transform: scale(1)
  }
  100% {
  box-shadow: 0 0 20px rgba(230, 230, 6);
  transform: scale(1.01)
  }
}
@keyframes pusecing {
  0% {
  box-shadow: 0 0 5px rgba(234, 232, 232);
  transform: scale(1)
  }
  100% {
  box-shadow: 0 0 20px rgba(243, 242, 242, 0.8);
  transform: scale(1.01)
  }
}

Сразу идет несколько вариантов, которые только отличаются палитрой цвета. Но главное считаю, это то, что все функций производятся на чистом CSS.

Как можно увидеть, что все сделано под темный формат, так как тени присутствуют в аналоге своего элемента. Но если решите создать под светлый, то вам нужно отредактировать в CSS стилистику оттенка.

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

02 Июня 2019 Загрузок: 1 Просмотров: 1559 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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