css - Flipcard 在移动设备上不起作用 - 变换样式问题：preserve-3d？

Question

我为我的网站创建了一些活动卡片，它在桌面上运行良好，但这些卡片在移动设备上显示不正常（双方同时出现）。

我读到可能存在一些与变换样式相关的问题：preserve-3d; 在 ios 设备上输入 css，但无法让它在我的终端上工作。我在下面的代码笔中复制了这个问题，并链接了另一个可能有用的问题。

关于如何使它在我的用例中工作的任何想法？

https://codepen.io/cleyfe/pen/xxLddoW

.card-flip {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

Flipcards ...在移动设备上损坏