Javascript css3 div动画故障排除

我正在尝试解决一个突然出现在我的网页上的问题。您将看到，在我的网格布局中，步骤1、步骤2、步骤3和步骤4 div使用css3动画设置为旋转。然而，当添加其他css并出于某种原因进行更改时，动画正在混乱中。div应该是旋转的，然后文本可以轻松进入。但是，当div旋转时，它们的文本显示在div后面。它还显示上面div中的文本！我不知道这里发生了什么事，但我真的需要一些人的帮助，因为我无法摆脱它

有关div的HTML文件

---

但是，要更清楚地了解我的问题，请查看livelink，查看步骤divs中的错误，并查看我的源代码。我将在回答问题时删除livelink，以供该帖子的后人参考。

我将改变这种动画的整体方式。最常见的方法是有两个单独的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>

这样，您就不必对文本淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡

编辑

---

和一个4件网格-

嗨，你能告诉我如何在网格中有4件吗？因为我无法让它工作，所以更新了我的答案：）

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