• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Эффект вращение изображений с помощью CSS3 (Эффект переворачивающихся карт при помощи CSS3)
Эффект вращение изображений с помощью CSS3
Kosten
Дата: Воскресенье, 2018-10-14, 22:55 | Сообщение 1
Администраторы
Сообщений:18866
Награды: 55


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

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



HTML

Код
<div class="presentan-depossib">
  <div class="tesamilpod">
    <div class="savetun"><img src="http://images.vfl.ru/ii/1539545643/7c8f8f4d/23798143.png"></div>
    <div class="kitsagolpem"><span>Здесь идет описание картинки</span></div>
  </div>
</div>


CSS

Код
.presentan-depossib {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #d5d5d5;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor:pointer;
}
.tesamilpod {
  width: 300px;
  height: 300px;
  position: relative;
  perspective: 1000px;
  border: 2px solid #f1f1f1;
}
.savetun, .kitsagolpem {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1s;
  backface-visibility: hidden;
  background-color: #f1f1f1;
}
.savetun img {
    max-width: 100%;
    min-width: 100%;
    height: auto;
}
.kitsagolpem {
  transform: rotateY(180deg);
}
.tesamilpod:hover .savetun {
    transform: rotateY(180deg);}
.tesamilpod:hover .kitsagolpem {
    transform: rotateY(360deg);}


Демонстрация
Прикрепления: 1501025.jpg(39.2 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Эффект вращение изображений с помощью CSS3 (Эффект переворачивающихся карт при помощи CSS3)
  • Страница 1 из 1
  • 1
Поиск: