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.。

Answer 1

看看这个小提琴：demo
1：
我将-webkit-transform: rotateY(0deg);更改为-webkit-transform:rotateY(180deg);
2：
我添加了transform: rotateY(180deg);
3：
我封装了.hover-img。 .trigger所以当您悬停.trigger时，它会为.hover-img

设置动画

我测试了它：Firefox（最新），Chrome（最新）IE（最新）

CSS过渡/动画不起作用

1 个答案: