翻转卡不会在移动设备上翻转回来

Question

如何在移动设备上获得翻转效果？它在 PC 上工作正常，因为我使用 :hover 伪选择器，但在移动设备上它只翻转一次，只有在单击另一张卡片时才会翻转回来。如何在手机和平板上实现全翻盖效果？

.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;
  }

Answer 1

我想你可以这样试试。

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

Answer 2

松开手指后翻

当你点击触摸设备的屏幕时，你必须想象你的理论鼠标光标（不可见）已经移动到你手指的位置，当你松开手指时，它将保持在这个位置直到你点击别的地方。我可以考虑两种解决方案：

你让它保持原样，所以你必须点击离开才能把它变回来
或者你在用户松开手指后立即将其转回（只要你想让它翻转，你的手指就需要一直停留在屏幕上）

您已经有了第一个解决方案，所以这里是第二个（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;
}

<div class="mouse-device"></div>                  <!-- this will always be a div that changes style on hover -->
<div id="touch_div" class="margin-top"></div>     <!-- this will be identical to the first div when you're not on a touch device, but it will change to touch sensitive when you are on a touch device -->

这些 div 没有翻转，但您应该了解如何在触摸设备上控制样式。

如果您对我的解决方案有任何疑问，请在此回复。

Answer 3

更新：我发现使用媒体查询隐藏了更简单的解决方案：

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

翻转卡不会在移动设备上翻转回来

Flip card won't flip back on mobile device

html

css

hover

flip

responsive

松开手指后翻