I would like to know if it’s possible and how can I achieve inverted spherical effect of custom texture in pure CSS, without using any 3rd party like three min js. I have created basic render for my idea here:
I have tried using canvas, classic transform or SVG Displacement map as someone else falsely recommended, but it can’t be made via this.
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>Source of example texture can be found here: https://spacedock.info/content/SqueakyB_141746/KSP2_Pre-Alpha_Style_NavBall/KSP2_Pre-Alpha_Style_NavBall-1729683637.png
