如何用纯CSS实现自定义纹理的反向球面效果？

我想了解是否可以不使用three.js等第三方库，仅通过纯CSS实现带自定义纹理的反向球面效果，以及具体的实现方法。我已制作了该想法的基础渲染示例：

我尝试过使用canvas、常规transform和SVG位移映射，但均未得到理想效果。以下是我的基础代码：

let pitch = 0,
    yaw = 0;
document.addEventListener('keydown', (event) => {
  if (event.key === 'ArrowUp') pitch -= 5;
  if (event.key === 'ArrowDown') pitch += 5;
  if (event.key === 'ArrowLeft') yaw -= 5;
  if (event.key === 'ArrowRight') yaw += 5;
  document.getElementById('navball').style.transform = `rotateX(${pitch}deg) rotateY(${yaw}deg)`;
});

body {
  margin: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: black;
}

.navball-container {
  width: 300px;
  height: 300px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 800px;
}

.navball {
  width: 100%;
  height: 100%;
  background: url('https://spacedock.info/content/SqueakyB_141746/KSP2_Pre-Alpha_Style_NavBall/KSP2_Pre-Alpha_Style_NavBall-1729683637.png');
  background-size: 150%;
  background-position: center;
  border-radius: 50%;
  transform-style: preserve-3d;
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1) 100%);
  -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1) 100%);
}

<div class="navball-container">
  <div class="navball" id="navball"></div>
</div>

示例纹理为KSP2 Pre-Alpha风格导航球纹理。

内容的提问来源于stack exchange，提问作者Oříšek