HTML/CSS翻转卡可以在桌面上使用，但不能在移动设备上使用

我正在帮助一位朋友创建一个基本的html/css网站，但我们在设置翻转卡片效果方面遇到了麻烦

你可以在这里看到： 那些中间部分的瓷砖在翻转时会翻转，并显示有关品牌的信息。 它在桌面上和使用Chrome的响应查看器时似乎工作得很好

然而，当我在我的移动设备（ios）上访问该网站时，它会产生翻转效果，但不会显示卡背面的内容

.flip卡{
背景色：透明；
宽度：32%；
显示：内联块；
高度：200px；
透视图：1000px；
左侧填充：1px；
右侧填充：1px；
}
.翻转卡内部{
位置：相对位置；
宽度：100%；
身高：100%；
文本对齐：居中；
转变：转变0.6s；
变换样式：保留-3d；
}
.翻转卡：悬停。翻转卡内部{
变换：旋转（180度）；
}
.正面翻转卡片，.背面翻转卡片{
位置：绝对位置；
宽度：100%；
身高：100%；
背面可见性：隐藏；
}
.翻转卡正面{
颜色：黑色；
}
.把卡片翻回去{
背景色：#000；
颜色：#fff；
变换：旋转（180度）；
}
@介质（最大宽度：768px）{
.翻盖卡片{
高度：180像素；
}
}
@介质（最大宽度：425px）{
.翻盖卡片{
宽度：98%；
高度：150像素；
}
}

欧莱雅豪华酒店
“欧莱雅奢华开启了一个独特的美丽世界。其国际品牌体现了三大专业领域的优雅和精致：护肤、化妆和香水

身体{
字体系列：Arial、Helvetica、无衬线字体；
}
.翻盖卡片{
背景色：透明；
宽度：300px；
高度：300px；
透视图：1000px；
}
.翻转卡内部{
位置：相对位置；
宽度：100%；
身高：100%；
文本对齐：居中；
转变：转变0.6s；
变换样式：保留-3d；
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
}
.翻转卡：悬停。翻转卡内部{
变换：旋转（180度）；
}
.正面翻转卡片，.背面翻转卡片{
位置：绝对位置；
宽度：100%；
身高：100%；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
}
.翻转卡正面{
背景色：#bbb；
颜色：黑色；
}
.把卡片翻回去{
背景色：#2980b9；
颜色：白色；
变换：旋转（180度）；
}
背面有文字的卡片翻页
将鼠标悬停在桌面上的图像上以查看背面
点击手机上的图片查看背面
内容头
内容第一部分

内容第二部分

这太完美了！我唯一缺少的是添加：嗨，我也在使用类似的css来实现翻页卡功能。虽然我需要在“移动”视图中添加一个功能。在“移动”视图中，单击时翻页，但在下一次单击时不会再次翻页。如果我单击卡以外的任何位置，它会翻页，尽管我想让它在点击汽车时翻转过来。有什么帮助吗？