CSS - 在曲线路径中动画化对象 [英] CSS - Animate object in curved path

问题描述

我只想通过弯曲的路径为我的图像制作动画。像这样。 （我使用位置绝对定位。）做了一些研究，发现CSS转换可以完成这项工作。它可以很容易地通过直线完成。但弯曲的路径？

我试图与css transform-origin + transform结合：旋转，但我没有得到确切的，我想要的。很显然，我想左转80％左右，需要到原来的位置。我尝试了很多次调整我的代码，但仍然没有运气。

<当你想将一些 transform 操作应用于一个元素时，该变换有一个参考点，将被应用。这是原点点，默认情况下它位于每个元素的中心（即：变换原点（50％50％））。

使用此语句，您可以随时修改该来源，只要您需要从不同来源进行转化即可。

这里可以看到一个例子，当旋转从左上角。注意：您可以设置 transform-origin 。甚至在元素之外

I just want to animate my image through curved path. Like this way. ( I'm using position absolute for positioning. ) Did some research and found that css transform can do the job. It can be easily done by straight line. But curved path?

I tried to combine with css transform-origin + transform:rotate but I didn't get exact that I want. Clearly I want to move around 80% to the left curved and need to come to original position. I tried so many times adjusting my code but still no luck.

Fiddle

P.S

What is transform-origin really do here? Is it necessary? Can someone explain me about how transform:rotate works here?

Here is my code

.sun{
  width: 5.7%;
  position: absolute;
  top: -5%;
  left: 57%;
  animation: circle 10s linear infinite;
  transform-origin: 0px 700px;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}

@keyframes circle {
  from {
    transform:rotate(-60deg); 
  }
  to { 
    transform:rotate(40deg); 
  }
}

<div class="sun">
 <img src="sun.png" alt="">
</div>

解决方案

When you want to apply some transform operation to an element, that transformation has a reference point from where it will be applied. That is the origin point and by default it is at the center of every element (i.e.: transform-origin(50% 50%)).

With this statement you can modify that origin whenever you need the transformation to apply from a different origin.

Here you can see an example when the rotation is done from the top left corner. Without the origin modification, it would rotate around its center.

Note: You can set the transform-origin even outside the element

这篇关于CSS - 在曲线路径中动画化对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！