对CSS3 div动画进行故障排除

Question

我正在尝试解决网页上突然出现的问题。 如果您查看此实时链接，您会发现在我的网格布局中，使用css3动画对第1步，第2步，第3步和第4步div进行了旋转动画。 但是，在添加其他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;
}

但是，为了更清楚地了解我的问题，请查看实时链接，并在步骤div中查看错误并查看我的源代码。 我将删除问题答案的实时链接，以免该职位将来遭受后遗症。

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

小提琴

这样，您就不必计时文本的淡入时间。 :)

编辑

和一个4片网格- 小提琴