RSS-подписка

RSS-лента

Новые статьи

Последние комментарии


Получать обновления на эл. почту

Ваш e-mail:

Рассылка новостей от Loco

Flip-вращалка на css. Эффект кручения карточки на обратную сторону

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

html:

<div class="flip">
                        <div class="front" style="background-image: url(/images/sabaeva.jpg)">
                            <div class="PhotoCard">
                            <h5 class="voffset40 text-center bold">Анжелика Сабаева</h5>
                            <p class="text-center bold">чемпионка мира по Кёкусинкай каратэ</p>
                            </div>
                        </div>
                        <div class="back">
                           <h6>Анжелика Сабаева</h6>
                           <p class="text-left">- Заслуженный Мастер спорта<br/>
                           - Трехкратная чемпионка мира<br/>
                           - Чемпионка Европы<br/>
                           - Бронзовый призер Чемпионата Мира<br/>
                           - Пятикратная чемпионка России<br/>
                           - Лучший спортсмен по итогам 2017 г. в мировом рейтинге</p>
                        </div>
                    </div>

 

css:

.flip {
  position: relative;
}
.flip > .front,
.flip > .back {
  display: block;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 0.9s;
  transition-property: transform, opacity;
}
.flip > .front {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.flip > .back {
  position: absolute;
  opacity: 0;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}
.flip:hover > .front {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}
.flip:hover > .back {
  opacity: 1;
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

.flip {
  position: relative;
  display: inline-block;
  margin-right: 2px;
  margin-bottom: 1em;
  //width: 400px;
}
.flip > .front {
    color: #fff;
    text-shadow: #000000 0px 0px 15px;
}
.flip > .back {
    color: #000;
}
.flip > .front,
.flip > .back {
  display: block;
  width: inherit;
  background-size: cover !important;
  background-position: center !important;
  height: 400px;
  padding: 1em 2em;
  background: #fff;
  border-radius: 10px;
}

.front p {text-shadow: #000000 0px 1px 3px;}

.back {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  //background: #DCB8B2;
  //color: white;
}
.back h3 {
  position: relative;
}
.back h3:after {
  content: "";
  width: 50px;
  height: 1px;
  position: absolute;
  bottom: -10px;
  left: 50%;
  background: white;
  margin-left: -25px;
}
.back p {
  padding-top: 15px;
}

.PhotoCard {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    box-sizing: border-box;
    padding: 15px;
    border-radius: 6px;
}

 

 

Источник: loco.ru

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Вы можете почитать все статьи от almix'а.



Другие статьи по этой теме:

Комментарии (0)     Подпишитесь на RSS комментариев к этой статье.