html - CSS 过渡/动画不工作

Question

我有使用 css 动画旋转并淡入文本的 div，这些在鼠标悬停时起作用。 淡入有效，但旋转无效。下面是我的代码。

.hover-img {
  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: rotateY(180deg);
  -webkit-transform-style: preserve-3d;
  text-align: center;
  font-size: 0;
}
.hover-img:hover {
  -webkit-transform: rotateY(0deg);
  font-size: 14px;
  color: white;
}

<div id="container">
  <p>ggggggggggggggggggggg</p>
  <div id="cell1">
    <div tabindex="0" class="maincontentdiv4 hover-img" style="box-shadow: 5px 5px 5px #999; height: 390px; background-image: url(slide2.png);">ffffffffffff</div>
    <p></p>
    <div tabindex="0" class="maincontentdiv4 hover-img" style="box-shadow: 5px 5px 5px #999; height: 390px; background-image: url(slide2.png);">ffffffffffff</div>
    <p></p>
  </div>
  <div id="cell1">
    <div tabindex="0" class="maincontentdiv4 hover-img" style="box-shadow: 5px 5px 5px #999; height: 390px; background-image: url(slide2.png);">ffffffffffff</div>
    <p></p>
    <div tabindex="0" class="maincontentdiv4 hover-img" style="box-shadow: 5px 5px 5px #999; height: 390px; background-image: url(slide2.png);">ffffffffffff</div>
    <p></p>
  </div>
  <div id="cell3">
    <div tabindex="0" class="maincontentdiv4 hover-img" style="box-shadow: 5px 5px 5px #999; height: 390px; background-image: url(slide2.png);">ffffffffffff</div>
    <p></p>
    <div tabindex="0" class="maincontentdiv4 hover-img" style="box-shadow: 5px 5px 5px #999; height: 390px; background-image: url(slide2.png);">ffffffffffff</div>
    <p></p>
  </div>
</div>

我也相信，因为这是一个站点特定的问题，所以包含一个 livelink. 会很有帮助。一旦问题得到解答，我将立即将其删除，以供此帖子的 future 后代使用。

Answer 1

看看这个 fiddle :demo
1:
我将 -webkit-transform: rotateY(0deg); 更改为 -webkit-transform:rotateY(180deg);
2:
我添加了 transform: rotateY(180deg);
3:
我用 .hover-img 封装了 .hover-img。 .trigger 所以当你将鼠标悬停在 .trigger 上时，它会激活 .hover-img

我在:Firefox(最新)、Chrome(最新)、IE(最新)中测试过