Хочу научить сферу вращаться вокруг оси Y.
Вопрос в том, как это сделать?
Вот этот код, он не работает так как мне надо:
Vue.config.devtools = false
Vue.config.productionTip = false
var app = new Vue({
el: '#app'
})
.rotate {
animation: rotate 5s infinite;
transform-style: preserve-3d;
}
@keyframes rotate {
to {
transform: rotateY(360deg);
}
}
.svg {
transform-style: preserve-3d;
}
.circle {
stroke: orangered;
fill: rgba(0, 0, 0, 0);
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<svg width="178px" height="178px" version="1.1" viewBox="-100 -100 200 200" class="svg">
<g class="rotate">
<circle class="circle" v-for="x in 10" cx="0" cy="0" :r="95" :style="`transform: rotateY(${12*x}deg); transform-style: preserve-3d;`" />
</g>
</svg>
</div>
Оказалось что вращается диск. А мне нужно что бы это было вращение сферы, по типу как Земля крутится вокруг своей оси.
Почему данный код не работает удалось узнать, причина в том что вне зависимости от внутренних вращений весь рисунок SVG это плоскость.
Как можно решить задачу и анимировать вращение всей сферы целиком?
Во всех вместе ответаз я хочу получить все возможные решения этой задачи сделанные на различных технологиях.
Подходят: HTML, CSS, SVG, SMIL, Canvas, WebGl, three.js и др.
PS: Сфера должна состоять именно из колец как на моделе в примере, не любая сфера.