Div CSS3转换-Iphone

我的网站有问题。我使用CSS3和Transform来旋转DIV。在除Iphone之外的所有浏览器上都没有问题，只有在FAQ页面上，DIV不会旋转

你知道为什么我找了几个小时，却不明白

<div class="block1_faq_container">
<div class="block1_faq_card">
<div class="front blue">
<h4 class="title">How many clubs may I put in a Bagolf bag?</h4>
</div>
<div class="back face center blue">
<span class="title-148-1-2">There are 15 dividers for 14 clubs and 1 umbrella. Each club has its own divider!</span>
</div>
</div>
</div>

---

非常感谢：）

如果您提供了相关的CSS效果，这会很有帮助，但这并不是最令人愉快的用户体验。如果他们在您的faq页面，他们希望找到问题的答案。可用性比其他方面重要得多。@ChrisM想告诉你的是，用户通常希望快速找到答案，而不在乎答案看起来如何。这种翻转卡布局是无用的，尤其是在移动设备上。所以，如果你真的坚持使用它们，至少要为手机做不同的设计，在手机上你应该避免向用户隐藏数据。我建议使用标准的Q/A纯文本页面，没有必要重新发明轮子。而且，这在旧浏览器上可能不起作用。另外，当我第一次访问页面时，我甚至不知道答案在卡片后面，因为旋转太慢了。当我第一次开始用鼠标扫描页面时，每张卡片只会稍微移动，然后在鼠标继续移动时向后移动。你必须把鼠标放在那里整整一秒钟，答案才会出现。至少使旋转速度更快，甚至可能使它保持在答案上，即使鼠标离开它，并且只返回到另一个悬停或单击事件的问题。只是一个建议

.block1_faq_container{margin: 10px 0 0; width: 306px; height: 148px; text-   align:center;float:left;}
.block1_faq_card,
.block1_faq_card > div{width: inherit;height: inherit;transition: transform 1s; -webkit-transition: all 1s ease-in-out;}
.block1_faq_card > div{line-height: 148px;position: absolute;backface-visibility: hidden; -webkit-backface-visibility: hidden;}
.block1_faq_container:hover .front{transform: perspective(600px) rotateY(180deg); -webkit-transform: perspective(600px) rotateY(180deg);}
.block1_faq_container:hover .back{transform: perspective(600px) rotateY(360deg); -webkit-transform: perspective(600px) rotateY(360deg);}
.title {font-size: 1.9em !important;font-weight: lighter;color:#fff; vertical-align:middle;line-height:1.2em;display:inline-block; padding:10px; }
.title-148-1-2 {font-size: 1.4em !important;font-weight: normal;color:#fff; vertical-align:middle;line-height:1.2em;display:inline-block;padding:10px;}
.front.blue{background-color:#00a0e9;transform: perspective(600px) rotateY(0deg); -webkit-transform: perspective(600px) rotateY(0deg);line-height:148px;}