Разворот картинки при наведении CSS

Разворот картинки при наведении CSS

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

Пример

HTML


<div class="rotate-block">
  <div class="change-img">
    <div class="front-side-img"><img src="image.jpg" alt=""/></div>
    <div class="back-side-img"><img src="image.jpg" alt=""/></div>
  </div>
</div>

CSS


/* Блок картинки */
.rotate-block {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Изображение */
.change-img {
  width: 300px;
  height: 300px;
  position: relative;
  perspective: 1000px;
  border: 1px solid #d68360; /* Рамка */
}
.change-img:hover .front-side-img {
  transform: rotateY(180deg);
}
.change-img:hover .back-side-img {
  transform: rotateY(360deg);
}
/* Стороны изображения */
.front-side-img, .back-side-img {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1s;
  back-side-imgface-visibility: hidden;
 }
.front-side-img img {
  max-width: 100%;
  min-width: 100%;
  height: auto;
}
.back-side-img img {
  max-width: 100%;
  min-width: 100%;
  height: auto;
  transform: scaleX(-1);/* Отражаем изображение по горизонтали */
}
.back-side-img {
  transform: rotateY(180deg);
}
By julia