Question

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

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

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

1 个答案:

demo