html - CSS transform rotate 在 Chrome 上运行异常

Question

当我检查 Firefox 时，它运行良好。但是当使用 Chrome 37 时，转换旋转效果不佳。

谁能帮我解释一下这里发生了什么？

这是我的代码:

代码笔: 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;
        }
    }
}

Answer 1

您现在已经更改了您的演示，但正如其他地方所指出的，您需要:

.team-box {
   z-index:1;
}