Создать сферический эффект в CSS ⇐ Html

[Anonymous]

Я хотел бы знать, возможно ли это, и как я могу достичь инвертированного сферического эффекта пользовательской текстуры в чистых CSS, без использования какой -либо сторонней стороны, например Thry.js. Я создал базовый рендеринг для моей идеи здесь:

Я пробовал эффект Canvas, классический преобразование и выброс SVG, но не создал DES -эффект, но не создал DES -эффект. />

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)`;
});< /code>
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 ... 683637.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%);
}< /code>


< /code>
< /div>
< /div>
< /p>
Источник примера текстуры можно найти здесь: https://sscedock.info/content/squeakyb_ ... 683637.png


Подробнее здесь: https://stackoverflow.com/questions/795 ... ect-in-css