如何在css3动画中旋转椭圆形图像周围的图像？

我是css3动画的初学者。我有一个任务就像，笔形图像是在椭圆形图像上旋转。尽我所能我尝试下面的代码用于我的任务。你有没有人帮我请？

#txtBoxRotateContainer { height: 800px; } #txtBoxRotateContainer { height: 400px; left: 18px; position: absolute; top: 305px;tive; height: 400px; } div.rocket { left: 136px; position: absolute; top: 316px; -webkit-transition: all 3s ease-in; /* Safari and Chrome */ -webkit-animation:myfirst 6s infinite; } @-webkit-keyframes myfirst { 0% { -webkit-transform: rotate(-360deg);width:250px;left:130px;top:-100px; } 50% { -webkit-transform:rotate(-180deg);left:80px;top:150xpx;width:360px; } 100% { -webkit-transform: rotate(-10deg);width:700px;height:500px;top:250px;right:40px; } } body { line-height:130%; -webkit-tap-highlight-color: rgba(0,0,0,0)!important; -webkit-tap-highlight-color: transparent!important; }    
 
 
 
 
   

Answer 1

在CSS中轻松完成的是旋转某些东西。 为了使它以椭圆形状环绕，你可以使旋转的地方变形。 并且，要使正在旋转的对象保持纵横比，您需要撤消先前的变换。

HTML：

 
 
 
 
A 
 
 
  

和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)} } 

演示