时间戳

首页 > 解决方案 > 翻转卡不会在移动设备上翻转

html - 翻转卡不会在移动设备上翻转

问题描述

如何在移动设备上获得翻转效果？它在 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;
  }

标签： htmlcsshoverresponsiveflip

解决方案

松开手指时向后翻转

当您单击触摸设备的屏幕时，您必须想象您的理论鼠标光标（不可见）已移动到您手指的位置，当您松开手指时，它会一直停留在该位置，直到您单击其他位置。我可以考虑两种解决方案：

  1. 你让它保持现在的样子，所以你必须点击离开才能把它转回来
  2. 或者您在用户松开手指后立即将其转回（只要您希望它被翻转，您就需要将手指留在屏幕上）

您已经有了第一个解决方案，所以这是第二个（小提琴上的这个解决方案）：

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 不会翻转，但您应该了解如何控制触摸设备上的样式。

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

推荐阅读