• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Сделать эффект переворота изображение в CSS (Создайте анимацию переворачивание изображение в CSS)
Сделать эффект переворота изображение в CSS
Kosten
Дата: Вторник, 2019-02-12, 23:06 | Сообщение 1
Администраторы
Сообщений:22338
Награды: 56


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

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



HTML

Код
<div class="geasunav-gationamemed v">
<div class="zanamugeb">
<img src="Ссылка на изображение 1"/>
</div>
<div class="derunopas"> Привет
<br>
От сайта zornet.ru
<br>
<br>
Вы посещаете отличный сайт.
<br>
дизайн сайта
</div>
</div>
<div id="secondcard" class="geasunav-gationamemed h">
<div class="zanamugeb">
<img src="Ссылка на изображение 2"/>
</div>
<div class="derunopas">
Плохое содержание
<br>
<br>
найти информацию
<br>
также
<br>
которую
<br>
навигационную схему
</div>
</div>
<div class="geasunav-gationamemed v">
<div class="zanamugeb">
<img src="Ссылка на изображение 3">
</div>
<div class="derunopas">
<img src="Ссылка на изображение 3.3">
</div> </div>


CSS

Код
.geasunav-gationamemed {
    position: relative;
    width: 218px;
    height: 157px;
    perspective: 500px;
    float: left;
}
.geasunav-gationamemed.v:hover .zanamugeb, .geasunav-gationamemed.v.flip .zanamugeb{
  transform: rotateX(180deg);
}
.geasunav-gationamemed.v:hover .derunopas, .geasunav-gationamemed.v.flip .derunopas{
  transform: rotateX(0deg);
}
.geasunav-gationamemed.v .derunopas{
  transform: rotateX(-180deg);
}
.geasunav-gationamemed.h:hover .zanamugeb, .geasunav-gationamemed.h.flip .zanamugeb{
  transform: rotateY(180deg);
}
.geasunav-gationamemed.h:hover .derunopas, .geasunav-gationamemed.h.flip .derunopas{
  transform: rotateY(0deg);
}
.geasunav-gationamemed.h .derunopas{
  transform: rotateY(-180deg);
}
.geasunav-gationamemed .zanamugeb, .geasunav-gationamemed .derunopas {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    transition: all 0.5s ease-in;
    color: #f9f2f2;
    background-color: #0a0b2b;
    padding: 8px;
    backface-visibility: hidden;
}

.geasunav-gationamemed img
{
  width:100%;
  height:100%;
}


В этом материале создали кросс-браузер 3D-карту, использующую только css3.

Демонстрация
Прикрепления: 6424582.png(139.9 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Сделать эффект переворота изображение в CSS (Создайте анимацию переворачивание изображение в CSS)
  • Страница 1 из 1
  • 1
Поиск: