Question

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

http://www.bagolf.com/faq

你知道为什么我搜索了几个小时，我不明白。

<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代码：

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

非常感谢：）

Div CSS3转换 - Iphone

0 个答案: