当我检查Firefox时,它的效果很好。但是,当使用Chrome 37时,变换旋转效果不佳。
谁能帮我解释一下这里发生的事情吗?
这是我的代码:
Codepen:http://codepen.io/thehung1724/full/BxKvD/
的HTML
<div id="team">
<div class="content-section">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="team-box">
<img src="http://content.screencast.com/users/HungSzczesny/folders/Default/media/fd5d4869-0a99-4157-9494-41ccea7ca71d/team-1.jpg" alt="">
<div class="ImageOverlay"></div>
</div> <!-- end team-box -->
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="team-box">
<img src="http://content.screencast.com/users/HungSzczesny/folders/Default/media/0e07023a-77e8-4187-aec3-64e5498d2153/team-2.jpg" alt="">
<div class="ImageOverlay"></div>
</div> <!-- end team-box -->
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="team-box">
<img src="http://content.screencast.com/users/HungSzczesny/folders/Default/media/389660c7-1e6b-45f5-840c-100822f704f4/team-3.jpg" alt="">
<div class="ImageOverlay"></div>
</div> <!-- end team-box -->
</div>
</div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end content-section -->
</div> <!-- end team -->
CSS(无)
.team-box{
margin: 0 auto;
width: 254px;
height: 254px;
display: block;
overflow: hidden;
position: relative;
.border-radius(50%);
.ImageOverlay{
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
height: 254px;
width: 254px;
display: inline-block;
top: 0;
opacity: 0;
position: absolute;
left: 0;
-webkit-transform: rotate(-180deg) scale(0);
-moz-transform: rotate(-180deg) scale(0);
-ms-transform: rotate(-180deg) scale(0);
-o-transform: rotate(-180deg) scale(0);
transform: rotate(-180deg) scale(0);
.transition(~"all 0.3s ease 0s");
}
&:hover{
.ImageOverlay{
.transform(rotate(0) scale(1));
opacity: 1;
}
}
}
最佳答案
您现在已经更改了演示,但是正如其他地方所指出的,您需要这样做:
.team-box {
z-index:1;
}