У меня здесь jsfiddle - http://jsfiddle.net/w23v50h5/1/
div {
position: absolute;
left: 315px;
top: 143px;
width: 50px;
height: 50px;
background: red;
-webkit-animation: myOrbit 6s linear infinite;
-moz-animation: myOrbit 6s linear infinite;
-o-animation: myOrbit 6s linear infinite;
animation: myOrbit 6s linear infinite;
}
@-webkit-keyframes myOrbit {
from { -webkit-transform: rotate(0deg) translateX(5px) translateY(120px) rotate(0deg);}
to { -webkit-transform: rotate(360deg) translateX(5px) translateY(120px) rotate(-360deg); }
}
@-moz-keyframes myOrbit {
from { -moz-transform: rotate(0deg) translateX(100px) rotate(0deg); }
to { -moz-transform: rotate(360deg) translateX(100px) rotate(-360deg); }
}
@-o-keyframes myOrbit {
from { -o-transform: rotate(0deg) translateX(100px) rotate(0deg); }
to { -o-transform: rotate(360deg) translateX(100px) rotate(-360deg); }
}
@keyframes myOrbit {
from { transform: rotate(0deg) translateX(100px) rotate(0deg); }
to { transform: rotate(360deg) translateX(100px) rotate(-360deg); }
}
Я использую css trasform для перемещения элемента в овальной форме.
Мне нужен путь, по которому элемент движется дальше, чтобы быть более плоской овальной формой.
Мне также нравится масштабировать элемент таким образом, чтобы он был меньше в верхней части овала и больше снизу, поэтому он создает впечатление овальной орбиты, идущей назад и вперед.
Может ли кто-нибудь помочь сделать орбиту более плоской и масштабировать элемент.