Создание 3D-среды планеты
У меня есть планета, которой я придал линейный градиент, и я пытаюсь заставить камни окружать периметр планеты, в то же время, возможно, какая-то видимая погода на планете будет выглядеть как бродящие по ней тайфуны.
Цель состоит в том, чтобы создать планету с вращающимися вокруг нее камнями, на которые пользователь может слегка нажимать курсором, чтобы получить крутой эффект. Для этого может потребоваться JavaScript, но сначала я займусь первым проектом.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: black;
}
.planet,
.planet2 {
position: absolute;
margin: 5px;
top: 50%;
left: 50%;
transform: translate(-60%, 0);
height: 1100px;
width: 900px;
border-radius: 50%;
z-index: 2;
background: linear-gradient(40deg, #4a190290 20%, #7b222235, #2b2a29df);
box-shadow: -20px -20px 40px 40px #801a1a6f inset, 0 0 20px 40px #cb221f90;
}
.astroid__belt {
width: 100%;
height: 100%;
top: 10%;
left: calc(50% - 50%);
transform-style: preserve-3d;
transform: perspective(1000px);
text-align: center;
overflow: hidden;
position: relative;
}
.planet2 {
position: absolute;
background: linear-gradient(45deg, transparent 50%, #ac4444, #b90f0fde, #542408b0);
z-index: 3;
}
.astroid1 {
position: relative;
top: 10%;
width: 200px;
height: 400px;
left: calc(50% - 200px);
background-color: #090606;
border-right: 3px solid transparent;
border-radius: 50%;
z-index: 2;
animation: animateAstroid 7s linear infinite;
transform: tranzlateZ(550px);
}
.astroid__belt .astroid {
position: absolute;
inset: 0 0 0 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.astroid,
div {
position: absolute;
transform-style: preserve-3d;
border-radius: 70%;
}
@keyframes animateAstroid1 {
0% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100% {
transform: rotateX(0deg) rotateY(75deg) rotateZ(360deg);
}
}
@keyframes animateAstroid2 {
0% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100% {
transform: rotateX(0deg) rotateY(20deg) rotateZ(360deg);
}
}<div class = "astroid__belt">
<div class = "astroid1"></div>
<div class = "astroid2"></div>
<div class = "astroid3"></div>
<div class = "astroid4"></div>
<div class = "astroid5"></div>
<div class = "astroid6"></div>
<div class = "astroid7"></div>
<div class = "astroid8"></div>
<div class = "astroid9"></div>
<div class = "astroid10"></div>
<div class = "astroid12"></div>
</div>
<div class = "planet"></div>Я пытался заставить кольца вокруг планеты вращаться, как это обычно делает планета, а не только в двухмерном пространстве.
Создайте обертку perspective. Создайте прозрачную панель DIV.orbit, повернутую по оси X на 90°. Внутри него поместите меньший круг астероида DIV, также повернутый на 90 °, чтобы противостоять родительскому. Анимируйте родительский элемент так, чтобы он вращался линейно вокруг своего центра, и чтобы его дочерний астероид не «раскатывался» при вращении родительского элемента, вам придется вращать маленький астероид по оси Y в противоположную сторону, чтобы он всегда оставался в виде круга (а не круга). овал к линии и обратно). Если я правильно понял ваш вопрос - это и есть "3D".
Затем вместо использования классов типа .asteroidN просто используйте .asteroid - и используйте свойства CSS (CSS Vars), чтобы назначить другой угол наклона, скорость, начальное положение/угол орбиты для каждого из камней.
Я попробую. Спасибо. Я немного переработал код и посмотрю, смогу ли я воспроизвести то же самое, чтобы показать вам, возникает ли эта проблема по-прежнему. Я не ожидал ответа так скоро, но я ценю это. Я продолжу решать проблемы и работать над этим.
И нет, те «камни», которые я сделал, которые двигались, я удалил ранее. Я знаю, что их нет. Я буду держать вас в курсе новых результатов по мере продвижения.
Ответы 1
Вот мой вариант создания пояса астероидов,
создайте элементы .orbit для ваших .asteroid-ов. Вращайте элементы орбиты по оси X и вращайте астероиды в противоположном направлении. Анимируйте орбиты по оси Z и астероиды по оси Y на отрицательные 360 градусов, чтобы они вращались в противоположных направлениях и сохраняли форму круга.
* {
margin: 0;
box-sizing: border-box;
}
body {
background: black;
overflow: hidden;
}
.space {
perspective: 10000px;
height: 100dvh;
transform-style: preserve-3d;
}
.planet,
.orbit,
.asteroid {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
aspect-ratio: 1;
border-radius: 50%;
transform-style: preserve-3d;
}
.planet,
.asteroid {
--size: 10;
height: calc(var(--size) * 1%);
}
.planet {
background: hsl(var(--hue) 70% 50%) linear-gradient(40deg, #0000 0%, #0000 45%, #000a 55%, #000e 100%);
}
.orbit {
--radius: 70;
--duration: 6;
height: calc(var(--radius) * 1%);
box-shadow: 0 0 0 2vmin #fff4, inset 0 0 0 2vmin #fff4;
animation: orbit calc(var(--duration) * 1s) linear infinite;
rotate: 1 var(--y, 0) 0 80deg;
}
.asteroid {
margin-left: calc(var(--size) * -0.5%);
background: hsl(var(--hue) 70% 50%) linear-gradient(130deg, #0000 0%, #0000 45%, #000a 55%, #000e 100%);
animation: asteroid calc(var(--duration) * 1s) linear infinite;
rotate: 1 0 0 90deg;
}
@keyframes orbit {
100% {
transform: rotate3d(0, 0, 1, 360deg);
}
}
@keyframes asteroid {
100% {
transform: rotate3d(0, 1, 0, -360deg);
}
}v<div class = "space">
<div class = "planet" style = "--size:40; --hue:10;"></div>
<div class = "orbit" style = "--radius:70; --y:-0.2; --duration:10;">
<div class = "asteroid" style = "--size:8; --hue:20;"></div>
</div>
<div class = "orbit" style = "--radius:80; --y:-0.2; --duration:6;">
<div class = "asteroid" style = "--size:5; --hue:10;"></div>
</div>
<div class = "orbit" style = "--radius:100; --y:-0.28; --duration:30;">
<div class = "asteroid" style = "--size:10; --hue:180;"></div>
</div>
</div>Не идеально, но, надеюсь, вы сможете изучить эту идею дальше, например создать овальные, эллиптические орбиты для определенных камней и использовать анимацию кривой Безье вместо linear, поиграть с другими углами наклона и т. д.
Погоду на планетах (типа тайфунов, образований и т. д.) можно добиться так же, как и для астероидов, с той лишь разницей, что они должны вращаться вокруг планеты гораздо ближе, и вам не нужно противодействовать вращению элементов. Позвольте им расплющиваться/деформироваться при вращении на своих орбитах, просто добавьте вихревое вращение вокруг их оси Z. Также потребуется область отсечения, чтобы избежать плоского характера вращающегося элемента/панели.
Спасибо за помощь. Я знаю, как здесь манипулировали переменными, но раньше я не занимался этим так интенсивно. Я ценю это. Мне придется практиковаться в этом чаще. Это решает проблему. Теперь я могу что-нибудь подправить в будущем и изучить этот код. Я ценю это.
Спасибо, за интересный вопрос :)
ты имеешь в виду астЭроид. Сначала я делал круги — круг, затем немного изучал принципы 3D в CSS. В вашей демо-версии сейчас нет никаких камней, поэтому я предполагаю, что есть некоторые ошибки в коде или в предоставлении минимально воспроизводимого примера...