在不改变位置的情况下翻转弹出关闭按钮

<div class="popup">
  <div class="content">
    <!-- 弹出窗口或对话框的内容 -->
  </div>
  <span class="close-button"></span>
</div>

.popup {
  position: relative;
  /* 其他样式属性 */
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  background-image: url(close-button.png); /* 关闭按钮的图标 */
  background-size: cover;
  /* 其他样式属性 */
}

.close-button:hover {
  transform: rotate(180deg); /* 鼠标悬停时翻转按钮 */
  /* 其他样式属性 */
}

var popup = document.querySelector('.popup');
var closeButton = document.querySelector('.close-button');

closeButton.addEventListener('click', function() {
  popup.style.display = 'none'; // 隐藏弹出窗口
});

// 显示弹出窗口的代码