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

3D флип карта с эффектом на чистом CSS

В материале представлен flip-эффект CSS, который при наведении курсора на объект делает разворот с показом тыльной стороны, где идет описание, если говорить кратко, то это эффект поворачивающейся карточки, что полностью выполнен на чистой стилистике, где задействовано оформление и сам трюк.

Как понимаете, что при помощи такого материала, в нашем случай карточки, мы на сайте или на страницы сохраняем много место под другие функций. Да и сама карточка выглядит красиво, если одна сторона идет в темном оттенке, то вторую можно выполнить в светлой палитре.

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

Рассмотрим в изображение рабочий процесс, где для вас будет еще ссылка на demo страницу, что рассмотрите и уведите полноценный эффект и главное, где на интернет ресурсе, такой трюк применить.

Здесь видим как раз начало эффекта.

Это уже рассматриваем другую сторону, где убрав клик она развернется на место.

Установка:

HTML

Код

<div class="constposin_nagedaminr">
  <div class="kenagedad_makinolog">
  <div class="vedamologob_duvemenem">
  <div class="provements">
  <i class="fa fa-diamond fa-2x"></i>
  <h3>ZorNet.Ru сайт вебмастера</h3>
  </div>
  <p>Здесь идет первое описание, это при открытие страницы.</p>
  </div>
  <div class="detumopas">
  <h3>Вебмастеру сайта</h3>
  <p>Второе описание, после, того как вы наведи курсор, где эффект разворота.</p>
  </div>
  </div>
</div>

CSS

Код

.constposin_nagedaminr {
  text-align: center;
  width: 355px;
  margin: 18px auto;
  -webkit-perspective: 1200;
  perspective: 1200;
  -moz-transform: perspective(1200px);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.kenagedad_makinolog {
  position: relative;
  width: 355px;
  height: 280px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: .7s linear;
  -moz-transition: .7s linear;
  -o-transition: .7s linear;
  transition: .7s linear;
}
.vedamologob_duvemenem, .detumopas {
  box-sizing: border-box;
  font-family: 'Cabin', sans-serif;
  position: absolute;
  top: 0;
  left: 0;
  padding: 38px 18px 18px;
  width: 100%;
  height: 100%;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}
.vedamologob_duvemenem {
  z-index: 2;
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
  background: #111927;
  box-shadow: 0 1px 1px 0 rgba(16, 15, 15, 0.1);
  border-bottom: 1px solid #5b6a82;
}
i {
  color: #DCB8B2;
  display: inline-block;
  margin-bottom: 15px;
}
h3 {
  font-size: 15px;
  line-height: 18px;
  text-transform: uppercase;
  margin: 0 0 14px;
}
p {
  font-size: 14px;
  line-height: 25px;
}
.provements h3 {
  color: #d6dca8;
}
.vedamologob_duvemenem p {
  color: #efeded;
}
.detumopas {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  background: #3e0926;
  color: #eae7e7;
}
.detumopas h3 {
  position: relative;
}
.detumopas h3:after {
  content: "";
  width: 50px;
  height: 1px;
  position: absolute;
  bottom: -10px;
  left: 50%;
  background: white;
  margin-left: -25px;
}
.detumopas p {
  padding-top: 15px;
}
.constposin_nagedaminr:hover .kenagedad_makinolog{
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

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

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

20 Марта 2019 Загрузок: 2 Просмотров: 1325 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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