如何制作一个角度弹出窗口？

<button id="popupBtn">点击弹出窗口</button>
<div id="popupContainer">
  <div id="popupContent">
    <h2>弹出窗口标题</h2>
    <p>弹出窗口内容</p>
  </div>
</div>

#popupContainer {
  perspective: 1000px; /* 透视效果，用于实现 3D 转换 */
  display: none; /* 初始状态隐藏 */
}

#popupContent {
  width: 400px;
  height: 200px;
  background-color: #fff;
  transform-origin: top center; /* 设置弹出窗口的旋转中心 */
  transform-style: preserve-3d; /* 保留 3D 转换效果 */
  transform: rotateX(-90deg); /* 初始状态为隐藏，旋转 -90 度使其看不见 */
  transition: transform 0.5s; /* 动画过渡效果 */
}

.popup-show #popupContent {
  transform: rotateX(0); /* 显示弹出窗口，将其旋转 0 度 */
}

var popupBtn = document.getElementById('popupBtn');
var popupContainer = document.getElementById('popupContainer');

popupBtn.addEventListener('click', function() {
  popupContainer.classList.toggle('popup-show'); // 切换弹出窗口的显示状态
});