Поворот изображения при наведении CSS

Поворот изображения при наведении CSS

Этот эффект создает видимость объемной картинки. При знании HTML и CSS можно добавить кнопку или ссылку в нужное место и пользователи смогут переходить по ссылке. Хорошо подойдет для галереи изображений или для товаров на сайте.

Пример

Lorem

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend cursus leo, at fringilla dui mollis.

HTML


<div class="image-parlax" ontouchstart="this.classList.toggle('hover');">
  <div class="image-container">
    <div class="front-side" style="background-image: url(image.jpg)">
      <div class="inner">
        <p>Lorem</p>
        <span>Lorem ipsum</span>
      </div>
    </div>
    <div class="back-side">
      <div class="inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend cursus leo, at fringilla dui mollis.</p>
      </div>
    </div>
  </div>
</div>

CSS


.image-parlax{
  width: 50%; /* Ширина изображения */
  cursor: pointer;
}
.image-container{
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000px;
	  perspective: 1000px;
}
.front-side, .back-side{
  background-size: cover;
  background-position: center;
  min-height: 350px; /* Высота изображения */
  height: auto;
  border-radius: 50%; /* Скругление углов */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.25);
  text-align: center;
  color: #fff;
  font-size: 1.5rem;
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
}
.back-side{
  background: #343434;
  background: -webkit-linear-gradient(45deg,  #343434 0%,#000000 100%);
  background: -o-linear-gradient(45deg,  #343434 0%,#000000 100%);
  background: linear-gradient(45deg,  #343434 0%,#000000 100%);
}
.front-side:after{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  content: '';
  display: block;
  opacity: .6;
  background-color: #000;
  -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  border-radius: 50%; /* Скругление углов */
}
.image-container:hover .front-side,
.image-container:hover .back-side{
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.back-side{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.inner{
  -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
            transform: translateY(-50%) translateZ(60px) scale(0.94);
  top: 50%;
  position: absolute;
  left: 0;
  width: 100%;
  padding: 2rem;
  -webkit-box-sizing: border-box;
            box-sizing: border-box;
  outline: 1px solid transparent;
  -webkit-perspective: inherit;
            perspective: inherit;
  z-index: 2;
}
.image-container .back-side{
  -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.image-container .front-side{
  -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.image-container:hover .back-side{
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.image-container:hover .front-side{
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.front-side .inner p{
  font-size: 2rem;
  margin-bottom: 2rem;
  position: relative;
}
.front-side .inner p:after{
  content: '';
  width: 4rem;
  height: 1px;
  position: absolute;
  background: #C6D4DF;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -.75rem;
}
.front-side .inner span{
  color: rgba(255,255,255,0.7);
  font-family: 'Montserrat';
  font-weight: 300;
}
By julia