CSS Rotate3d на перекошенном эллипсе – не могу понять ⇐ CSS

[Anonymous]

Я пытаюсь повернуть эллипс, который уже вращается вокруг оси Y.
Предполагается, что это орбита вокруг планеты, на которую я хочу поместить некоторые элементы, поэтому все это вращается вокруг планеты.
Вот текущий код:

Код: Выделить всё

body {
height: 1000px;
background-color: #01143D;
}

.galaxy {
position: relative;
width: 100%;
height: 100%;
transform: rotateX(75deg);
transform-style: preserve-3d;
}

.planet {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-left: -200px;
margin-top: -200px;
border-radius: 50%;
background-color: #FB7209;
transform: rotateX(-75deg);
}

.orbit {
position: absolute;
top: 50%;
left: 50%;
width: 800px;
height: 800px;
margin-top: -400px;
margin-left: -400px;
border: 4px solid rgba(255, 255, 255, 0.4);
border-radius: 50%;
transform: rotateY(-15deg);
animation-name: orbit;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 3s;
}

@keyframes orbit {
0%   { transform: rotateZ(0deg); }
100% { transform: rotateZ(-360deg); }
}

.orbit .object {
position: absolute;
top: 50%;
width: 100px;
height: 100px;
margin-left: -50px;
margin-top: -50px;
border-radius: 50%;
background-color: red;
}

Код: Выделить всё

Основная проблема заключается в том, что я хочу, чтобы орбита была наклонена (rotateY(- 15 градусов)) и одновременно поверните его по оси Z с помощью анимации, и эти два нейтрализуют друг друга. Rotate3d ничего не меняет, по крайней мере, насколько я пробовал.
Есть идеи? Спасибо большое!

Подробнее здесь: https://stackoverflow.com/questions/785 ... figure-out