css3 div動畫故障排除

Question

我正在嘗試排查突然在我的網頁上出現的問題。 If you take a look at this livelink你會看到，在我的網格佈局中，步驟1，步驟2，步驟3，&第4步divs動畫使用css3動畫旋轉。但是，在添加其他css並因某些原因進行更改時，動畫混亂了。該div應該旋轉，然後文本緩動。但是，它們是文本顯示div後面的div旋轉。它也顯示了上面div中的文本！我不知道這裏發生了什麼，但請我真的需要幫助身體，因爲我無法理解它！

有問題的div的HTML

<div class="col"> 
     <div class="trigger"> 
      <div tabindex="0" class="maincontent hover-img img4"><img src="STEP1.jpg" width="200"/><p>Fill out our order form choosing the service you require and your payment details. We will then take a deposit and book you into our diary.<p></div> 
     </div> 
     <div class="trigger"> 
      <div tabindex="0" class="maincontent hover-img img5"><img src="STEP3.jpg" width="200"/><p>We will produce the work you require using the project plan. All of our work is produced Within the time limit set and to the highest possible standard.<p></div> 
     </div> 
    </div> 
    <div class="col"> 
     <div class="trigger"> 
      <div tabindex="0" class="maincontent hover-img img6"><img src="STEP2.jpg" width="200"/><p>We will have a face to face meeting to discuss everything that you require and we will put together a project plan.<p></div> 
     </div> 
     <div class="trigger"> 
      <div tabindex="0" class="maincontent hover-img img7"><img src="STEP4.jpg" width="200"/><p>A design is not finished until you are entirely happy. When we believe the work is complete we will send you an artwork approval form for you to sign and return.<p></div> 
     </div> 
    </div> 
</div> 

有問題的div的CSS

.hover-img, .hover-img.hover_effect { 
position: relative; 
width: 200px; 
height: 200px; 
-webkit-transition: all 1s ease-in-out; 
-moz-transition: all 1s ease-in-out; 
-ms-transition: all 1s ease-in-out; 
-o-transition: all 1s ease-in-out; 
transition: all 1s ease-in-out; 
-webkit-transform-style: preserve-3d; 
text-align: center; 
font-size: 0; 
-webkit-user-select: none; 
-webkit-touch-callout: none; 
border-style: solid; 
border-width: 1px; 
border-color: #CCCCB2; 
border-radius: 5px; 
} 

.trigger:hover > .hover-img { 
-webkit-transform: rotateY(180deg); 
-moz-transform: rotateY(180deg); 
-ms-transform: rotateY(180deg); 
-o-transform: rotateY(180deg); 
transform: rotateY(180deg); 
font-size: 14px; 
color: #FFF; 
} 
.trigger:hover > .hover-img.img4 { 
background-color: #f47878; 
} 
.trigger:hover > .hover-img.img5 { 
background-color: #f6c447; 
} 
.trigger:hover > .hover-img.img6 { 
background-color: #92cf96; 
} 
.trigger:hover > .hover-img.img7 { 
background-color: #f47878; 
} 
.trigger:hover > .hover-img.img12 { 
background-color: #92cf96; 
} 
.trigger:hover .hover-img img { 
display: none; 
} 

但是我的問題有更明確的想法，請查看LiveLink的並在步驟div中查看錯誤並查看我的源代碼。我將刪除有關該帖子未來後代的問題回答的livelink。

Answer 1

我會改變這種動畫的整體方法。最常見的方法是有2個獨立的div - 一個正面和另一個背面。現在

<div id="container"> 
    <div id="card"> 
     <div class="front face"> 
     <img src="your_PNG_file_here"/> 
     </div> 
     <div class="back face"> 
     <p>Your text goes here.</p> 
     </div> 
    </div> 
</div> 

你會翻轉兩者的容器面

#container:hover #card { 
    transform: rotateY(180deg); 
} 

Fiddle

這樣，你不會有時間淡出文本或那的。 ：）

編輯

和一個4件格 - fiddle