0

I have this flip div made in pure CSS. It works fine on desktop.

.container {
  width: 50%;
}

.flip-card {
  background-color: transparent;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}
<div class="container">
  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <img src="https://via.placeholder.com/400x400" alt="Avatar" style="width:100%;">
      </div>
      <div class="flip-card-back">
        <img src="https://via.placeholder.com/400x400" alt="Avatar" style="width:100%;">
      </div>
    </div>
  </div>
</div>

On mobile, on touch transform: rotateY(180deg); only works the first time and on the second touch does not return to the initial status.

Is it possible to flip it back to it's initial status in CSS? If not, what would I need to use?

Many thanks in advance!

https://jsfiddle.net/7zpm6br2/

Rana
  • 2,415
  • 2
  • 6
  • 25
  • 2
    Although not impossible in all circumstances, CSS is not designed to store state. However you might be interested in this: https://stackoverflow.com/a/6063367/438273 – jsejcksn Dec 15 '21 at 15:02

0 Answers0