如何在css3动画中旋转椭圆形图像上的图像？答案

【问题标题】：how rotate an image around on oval shape image in css3 animation?如何在css3动画中旋转椭圆形图像上的图像？
【发布时间】：2013-06-11 01:00:34
【问题描述】：

我是 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;
}

</style>

</head>
<body>
<div style="position:absolute;left:0px;top:0px;right:0px;">
<img src="../images/page7.jpg" width="778" height="1100" alt="image"/></div>
<div id="txtBoxRotateContainer">
    <div class="rocket"><img src="../images/pencil.png" alt="pencil" /></div>
</div>

</body>
</html>

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

在 CSS 中很容易做到的是旋转某些东西。要使其以椭圆形旋转，您可以使旋转的地方变形。而且，要使您正在旋转的对象保持纵横比，您需要撤消之前的变换。

HTML：

<div class="deform">
<div class="rotate">
<div class="counterrotate">
<div class="inner">A
</div>
</div>
</div>
</div>

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

demo

【讨论】：

但我需要在垂直椭圆形上旋转先生。有什么建议吗？
形状是水平的，因为有一个 scaleX(3)。所以，如果你想让它垂直，你应该在另一个轴上找到一个类似的属性;-)
得到了答案谢谢sir.deform { width: 329px;高度：149px； -webkit 转换：缩放（1.719）；左：142px；位置：绝对；顶部：212 像素；边界半径：50%； } .inner { -webkit-transform: scaley(0.5); }