图像变换旋转不旋转

Question

我试图得到一个XI的图像,当它被盘旋时必须旋转180度,但它只是向上移动而不是旋转.

我做错了什么,这看起来不会旋转180度？

.black {
  background: #000;
  width: 100%;
  height: 400px;
}
.popup-close {
  position: absolute;
  top: 40px;
  right: 40px;
}
#x-close:hover {
  -webkit-transform: translate(50%, -50%) rotate(180deg);
  transform: translate(50%, -50%) rotate(180deg);
}

<div class="black">
  <a class="popup-close" data-popup-close="popup-1" href="#">
    <img src="http://optimumwebdesigns.com/icons/delete-cross.png" alt="" height="40px" width="40px" id="x-close">
  </a>
</div>

Answer 1

由于translate您在悬停时添加的变换,十字架向上(和向右)移动.我相信你要添加它来使元素居中,在这种情况下,最好将它添加到元素本身的默认状态.

旋转实际上正在发生,但你没有看到它,因为180度旋转的十字形给出相同的输出.您可以添加过渡以查看旋转(或)更改旋转角度.

.black {
  background: #000;
  width: 100%;
  height: 400px;
}
.popup-close {
  position: absolute;
  top: 40px;
  right: 40px;
}
#x-close {
  transform: translate(50%, -50%);
  transition: transform 1s ease;
}
#x-close:hover {
  -webkit-transform: translate(50%, -50%) rotate(180deg);
  transform: translate(50%, -50%) rotate(180deg);
}

<div class="black">
  <a class="popup-close" data-popup-close="popup-1" href="#">
    <img src="http://optimumwebdesigns.com/icons/delete-cross.png" alt="" height="40px" width="40px" id="x-close">
  </a>
</div>