Flip card won't flip back on mobile device

Question

How can I get flip back effect on mobile devices? It works fine on pc because I use the :hover pseudo selector, but on mobile devices it just flips once and flips back only if another card is clicked. How can I achieve full flip effect on phones and tablets?

.flip-card {
    background-color: transparent;
    width: 300px;
    height: 300px;
    perspective: 1000px;
    margin: 2%;
  }
  
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  }
  
  .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-front {
    background-color: #bbb;
    color: white;
  }
  
  .flip-card-back {
    background-color: #2980b9;
    color: white;
    transform: rotateY(180deg);
  }
  .preiposle{
      display: flex;
      justify-content: space-evenly;
      padding-top: 50px;
      position: relative;
      text-align: center;
      color: white;
      flex-wrap: wrap;
  }

user_14862382 · Answer

Flipping back when releasing the finger

When you click on the screen of a touch device you must imagine that your theoretical mouse cursor (that is not visible) has moved to the position of your finger and when you release your finger it will remain at this position until you click somewhere else. I can think about two solutions:

you leave it as it is now, so you have to click away to turn it back
or you turn it back right after the user releases his finger (you need to remain your finger on the screen as long as you want it to be flipped)

You already have the first solution, so here is the second (this solution on fiddle):

let touch_div = document.getElementById('touch_div');
let is_touch_device = false;
let touchstart_event_listener;  // save the event listeners, if you want to delete them later
let touchend_event_listener;    // save the event listeners, if you want to delete them later


if ("ontouchstart" in document.documentElement) {   // check if touch is enabled on device
  is_touch_device = true;
}

if (is_touch_device) {
  touch_div.classList.add('touch-device');  // adds a class to style the div for touch devices
  
  touch_div.addEventListener('touchstart', touchstart_event_listener = () => {  // event listener changes the class to hovered when you put your finger on the div
    touch_div.classList.replace('touch-device', 'touch-device-hovered');
  });
  
  touch_div.addEventListener('touchend', touchend_event_listener = () => {    // event listener changes the class back to not hovered when you release your finger
    touch_div.classList.replace('touch-device-hovered', 'touch-device');
  });
} else {
  touch_div.classList.add('mouse-device');  // adds a class to style the div for mouse devices
}

.mouse-device {
  width: 100px;
  height: 100px;
  background-color: purple;
}
.mouse-device:hover {
  background-color: green;
}
.touch-device {
  margin-top: 10px;
  width: 100px;
  height: 100px;
  background-color: red;
}
.touch-device-hovered {
  margin-top: 10px;
  width: 100px;
  height: 100px;
  background-color: blue;
}
.margin-top {
  margin-top: 10px;
}

These divs are not flipping but you should see how you can control the styles on touch devices.

Reply on this if you have any questions about my solution.

user_14855488 · Answer

I think you can try like this.

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

user_13468559 · Answer

Update: I found much simpler solution hidden using media query:

@media only screen and (hover: none){
      // styles go here
}

Flip card won't flip back on mobile device

3 Answers

Flipping back when releasing the finger