CSS3翻译：翻译椭圆路径上的元素

Question

我一直在寻找答案一段时间，但我可以看到的所有内容都是在循环路径中翻译对象。给定semiminor和semimajor轴的椭圆路径上有元素的翻译方法吗？非常感谢！

the jfiddle of belows answer

css3 

Answer 1

看一看这个页面，它解释大多都是你应该知道用CSS3转换。就像提醒一样：​​也可以设置关键帧，以确定您想要的样条的边缘点animate。

关键帧被解释为here。

在你的情况下，它是两个嵌套元素的动画。
＃1为要进行动画图片或元件，在其中定义一个X tranlate容易
＃2和一个作为该＃1外箱设置动画在Y平移用。
如果你在相同的时间范围内巧妙地安排它们，但不同的容易进出你可以使你的椭圆发生。

<style> 
    .viewport { 
     position:relative; 
     width:640px; 
     height:480px; 
     border:1px dashed #000; 
    } 
    .moveX { 
     position:absolute; 
     background:#f00; 
     height:2px; 
     width:480px; 
     top:240px; 
     left:0px; 
     -webkit-animation: mX 5s ease-in-out 0s infinite; 
     animation: mX 5s ease-in-out 0s infinite; 
    } 
    .moveY { 
     position:absolute; 
     width:480px; 
     height:100px; top:-50px; 
     border:1px solid #333; 
     -webkit-animation: mO 5s linear 0s infinite; 
     animation: mO 5s linear 0s infinite; 
    } 
    .elipsoid { 
     position:absolute; 
     background:url('http://placehold.it/100/00f/fff/&text=>°))><'); 
     top: 0px; 
     left: 0px; 
     width: 100px; 
     height: 100px; 
     border-radius:50%; 
    } 
    @keyframes mO { 
     0% { transform: rotate(0deg); } 
     100% { transform: rotate(360deg); } 
    } 
    @-webkit-keyframes mO { 
     0% { -webkit-transform: rotate(0deg); } 
     100% { -webkit-transform: rotate(360deg); } 
    } 
    @keyframes mX { 
     0% { transform: translateX(0px); } 
     50% { transform: translateX(160px); } 
     100% { transform: translateX(0px); } 
    } 
    @-webkit-keyframes mX { 
     0% { -webkit-transform: translateX(0px) } 
     50% { -webkit-transform: translateX(160px); } 
     100% { -webkit-transform: translateX(0px) } 
    } 
</style> 
<div class="viewport"> 
    <span class="moveX"> 
     <div class="moveY"><span class="elipsoid"></span></div> 
    </span> 
</div>