CSS过渡/动画不起作用

Question

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

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

我还认为，由于这是一个特定于站点的问题，因此包含实时链接会有所帮助。 我将在回答问题后将其删除，以备后继。

Answer 1

看看这个小提琴： 演示
1：
我改变了-webkit-transform: rotateY(0deg); 到-webkit-transform:rotateY(180deg);
2：
我添加了transform: rotateY(180deg);
3：
我用封装了.hover-img 。 .trigger因此，当您将.hover-img悬停.trigger ，它将为.hover-img设置动画

我在以下环境中进行了测试：Firefox（最新），Chrome（最新），IE（最新）