transform：rotateZ在动画期间覆盖CSS定位

Question

我在网站上使用transform rotateZ时遇到问题。

我正在尝试旋转一个放置在其上的两个元素的正方形。通过单击按钮激活旋转。

在单击按钮之前，正方形正确定位在两个元素后面。

但是，一旦我点击按钮执行动画，广场就会被置于顶部。完成动画后，它将返回到上述元素下方的原始位置。

我尝试更改元素的z-index以使它们保持在上面，但这似乎不起作用。

以下是我的代码。有谁知道这里发生了什么？

.squareMask1 {

  width: 230px;
  height: 210px;
  line-height: 210px;
  background-color: red;

  margin-top: -155px;
  margin-left: 60px;

  -webkit-transform-origin: 0% 50%;
  -webkit-animation: myfirst 3s linear; /* Chrome, Safari, Opera */
  animation-delay: 2s;

}
@-webkit-keyframes myfirst {
  0% { transform:rotateZ(0deg)}

  50% { }

  100% { transform:rotateZ(-180deg)}   
}

<div class="data">
  <a href="" class="circle">
    <!-- Changed all this stuff -->

    <span class="icon_humans dataicon"></span>
    <h4>Human <br> Demographics</h4>
    <div id="squareButton"></div>

  </a>
</div>

$('.icon_humans').click(function() {
    $('.circle').addClass('circle1');
    $('#squareMask').addClass('squareMask1');

    setTimeout(function() {
        $('.circle').removeClass('circle1');
        $('#squareMask').removeClass('squareMask1');

    }, 5500);
});