для вашего случая:

сто хочу оживить свое изображение по изогнутой дорожке. Вот так. (Я использую абсолютное положение для позиционирования.) Провел некоторое исследование и обнаружил, что преобразование CSS может сделать эту работу. Это можно легко сделать по прямой. Но изогнутый путь?

Я попытался скомбинировать css с transform-origin + transform: rotate, но я не получил именно то, что хотел. Очевидно, я хочу переместиться на 80% влево и изогнуться, и мне нужно вернуться в исходное положение. Я столько раз пытался изменить свой код, но все равно не повезло.

скрипка

P.S

Что такое transform-origin действительно здесь? Это необходимо? Может кто-нибудь объяснить мне, как работает transform: rotate?

Вот мой код

.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>

 sol26 окт. 2017 г., 11:03
Элемент оживляет меня по изогнутой траектории. Не могли бы вы подробнее рассказать о вашей проблеме?

Ответы на вопрос(3)

но вы можете легко сделать это с SVG-анимацией.

Я изменил образец из этогоруководство для вашего случая:

<svg width="500" height="350" viewBox="0 0 350 350">
  
  <path id="motionPath" fill="none" stroke="#000000" stroke-miterlimit="10" d="M100,100Q250,-50,400,100"/>
  
  <g id="sun" transform="translate(-100, -300)">
    <circle cx="100" cy="300" r="25" fill="yellow"/>
</g>
   
  <animateMotion 
           xlink:href="#sun"
           dur="3s"
           begin="0s"
           fill="freeze"
           repeatCount="indefinite"           
             >
    <mpath xlink:href="#motionPath" />
  </animateMotion>
</svg>

transform операция для элемента, это преобразование имеет контрольную точку, откуда оно будет применено. Этопроисхождения точка и по умолчанию она находится в центре каждого элемента (т.е.transform-origin(50% 50%)).

С помощью этого утверждения вы можете изменить этот источник всякий раз, когда вам нужно применить преобразование из другого источника.

Вот Вы можете увидеть пример, когда вращение сделано из верхнего левого угла. Без исходной модификации он вращался бы вокруг своего центра.

Примечание: вы можете установитьtransform-origin даже вне элемента

заставить родительский элемент двигаться с помощью поворота, и потомки (в моем случае псевдоэлемент, что угодно) делают положение абсолютным по отношению к родителю. И просто используйте анимацию. Посмотри на мое решение. , вам придется создать какую-то обертку и использоватьoverflow: hiddenпотому что это квадрат, который вращается. Вы можете наблюдать за поведением квадрата, добавивbackground-color.

@keyframes move-sun {
  from {
    transform: rotate(0deg);
  }
  
  to {
    transform: rotate(90deg);
  }
}

.sun {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 200px;
  transform: rotate(90deg);
  animation: move-sun 10s;
}

.sun::before {
  content: "";
  position: absolute;
  top: -25px;
  left: -25px;
  width: 50px;
  height: 50px;
  background-color: #ff0;
  border-radius: 50%;
}
<div class="sun">

</div>

Ваш ответ на вопрос