ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект переворачивающихся карт в CSS

Эффект переворачивающихся карт в CSS

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

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

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

Установка:

HTML

Код

<div class="kutogalsad-kevalaisonad">
  <div class="nudogalaisodas">
  <div class="magedsan">
  <span class="pasetun">Мстители: Финал</span>
  </div>
  <div class="kadolavuneg">
  <div class="gepukod-kesvegan"></div>
  <div class="nuvecan-mopasuneg">ZorNet.Ru</div>
  <p>Здесь идет описание по тематике или материалу.</p>
  </div>
  </div>
</div>

CSS

Код

.kutogalsad-kevalaisonad {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;

  border: 1px solid #ccc;
}

  .kutogalsad-kevalaisonad:hover .nudogalaisodas,
  .kutogalsad-kevalaisonad.hover .nudogalaisodas {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  }

.kutogalsad-kevalaisonad, .magedsan, .kadolavuneg {
  width: 320px;
  height: 427px;
}

.nudogalaisodas {
  -webkit-transition: 0.6s;
  -webkit-transform-style: preserve-3d;

  -moz-transition: 0.6s;
  -moz-transform-style: preserve-3d;

  -o-transition: 0.6s;
  -o-transform-style: preserve-3d;

  transition: 0.6s;
  transform-style: preserve-3d;

  position: relative;
}

.magedsan, .kadolavuneg {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
position: absolute;
  top: 0;
  left: 0;
}

.magedsan {
  background: url(http://zornet.ru/_fr/79/s2545102.jpg) 0 0 no-repeat;
  z-index: 2;
}

.kadolavuneg {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);

  kadolavunegground: #f8f8f8;
}

.magedsan .pasetun {
  font-size: 23px;
  display: inline-block;
  kadolavunegground: rgba(33, 33, 33, 0.9);
  color: #f8f8f8;
  font-family: Courier;
  padding: 5px 10px;
  border-radius: 5px;
  bottom: 60px;
  left: 25%;
  position: absolute;
  text-shadow: 0.1em 0.1em 0.05em #333;

  -webkit-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
  transform: rotate(-20deg);
}

.gepukod-kesvegan {
  position: absolute;
  top: 40px;
  left: 90px;
  width: 160px;
  height: 117px;
  background: url(http://images.vfl.ru/ii/1555712116/9bd1564e/26251992.png) 0 0 no-repeat;
}

.nuvecan-mopasuneg {
  font-weight: bold;
  color: #00304a;
  position: absolute;
  top: 180px;
  left: 0;
  right: 0;
  text-align: center;
  text-shadow: 0.1em 0.1em 0.05em #acd7e5;
  font-family: Courier;
  font-size: 2em;
}

.kadolavuneg p {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0 20px;
  font-family: arial;
  line-height: 2em;
}

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

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

Второй вариант:

HTML

Код

<div class="samoluptatem">
  <div class="ansequ-nuntuem">
  <div class="kacusa-ntiumum">
  <div class="dantiumr">
  <i class="fa fa-creative-commons fa-2x"></i>
  <h3>ZORNET.RU</h3>
  </>
  <p>Первое описание</p>
  </div>
  <div class="back">
  <h3>Название</h3>
  <p>Описание на тыльной стороне </p>
  </div>
  </div>
</div>

CSS

Код

body {
  margin: 0;
  background: #202f4c;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.samoluptatem {
  text-align: center;
  width: 320px;
  margin: 20px auto;
  -webkit-perspective: 1200;
  perspective: 1200;
  -moz-transform: perspective(1200px);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.ansequ-nuntuem {
  position: relative;
  width: 320px;
  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;
}
.kacusa-ntiumum, .back {
  box-sizing: border-box;
  font-family: 'Cabin', sans-serif;
  position: absolute;
  top: 0;
  left: 0;
  padding: 38px 20px 20px;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}
.kacusa-ntiumum {
  z-index: 2;
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
  background: white;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #f5f5f5;
}
i {
  color: #DCB8B2;
  display: inline-block;
  margin-bottom: 12px;
}
h3 {
  font-size: 16px;
  line-height: 20px;
  text-transform: uppercase;
  margin: 0 0 15px;
}
p {
  font-size: 14px;
  line-height: 25px;
}
.dantiumr h3 {
  color: #18191a;
}
.kacusa-ntiumum p {
  color: #818285;
}

element.style {
}

.back p {
  padding-top: 15px;
}

p {
  font-size: 14px;
  line-height: 25px;
}
user agent stylesheet
p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.back {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  background: #9a2570;
  color: #f5efef;
}
.back h3 {
  position: relative;
}
.back h3:after {
  content: "";
  width: 50px;
  height: 1px;
  position: absolute;
  bottom: -10px;
  left: 50%;
  background: #f9f1f1;
  margin-left: -25px;
}
.back p {
  padding-top: 14px;
}
.samoluptatem:hover .ansequ-nuntuem{
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

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

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

В этой статье мы рассмотрели эффект FLIP, который может использоваться для анимации позиций и размеров любого элемента быстрым способом. Где можно задействовать на современном дизайне, где также создают официальные сайты.

20 Апреля 2019 Загрузок: 1 Просмотров: 3460 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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