What is easily done in CSS is to rotate something.
To make it go around in an oval shape, you can deform the place where you are doing the rotation.
And, to make the object that you are rotating keep the aspect ratio, you need to undo the previous transforms.
The HTML:
<div class="deform">
<div class="rotate">
<div class="counterrotate">
<div class="inner">A
</div>
</div>
</div>
</div>
and the CSS
.deform {
width: 200px;
height: 200px;
-webkit-transform: scaleX(3);
background-color: lightblue;
left: 270px;
position: absolute;
top: 50px;
border-radius: 50%;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
-webkit-transform-origin: 50% 50%;
}
.counterrotate {
width: 50px;
height: 50px;
-webkit-animation: ccircle 10s infinite linear;
}
.inner {
width: 50px;
height: 50px;
position: absolute;
left: 0px;
top: 0px;
background-color: red;
display: block;
-webkit-transform: scaleX(0.33);
}
@-webkit-keyframes circle {
from {-webkit-transform: rotateZ(0deg)}
to {-webkit-transform: rotateZ(360deg)}
}
@-webkit-keyframes ccircle {
from {-webkit-transform: rotateZ(360deg)}
to {-webkit-transform: rotateZ(0deg)}
}
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
