Я хотел бы знать, возможно ли это, и как я могу достичь инвертированного сферического эффекта пользовательской текстуры в чистых CSS, без использования какой -либо сторонней стороны, таких как три мин JS. Я создал базовый рендеринг для моей идеи здесь:
Я пробовал Canvas, классический преобразование или Svg. это. < /p>
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
