Как сделать вращение картинок относительно центра, но с сохранением положения самой картинки?

Question

Как сделать вращение картинок относительно центра, желательно с сохранением положения самой картинки(чтобы головы не крутились, а стояли вертикально).

Answer 1

Достаточно добавить системе вращение в одну сторону, а мелким объектам в противоположную. Ну и держите немного извращений с луной ;•)

*{box-sizing:border-box;}
body{
background: #000710;
}
#system {
  position: absolute;
  width: 400px;
  height: 400px;
  left: 150px;
  top: 100px;
  animation: rotate 10s linear infinite;
  border: 0px solid blue;
}

#sun{
  position: absolute;
  width:50px;
  height:50px;
  left:175px;
  top:175px;
  background: radial-gradient(at 50% 50%, #F80 5%, #F80 40%, #fc0 60%, #f0800000 80%, #f0a00000 100%);
  border-radius:50%;
}

.planet{
  position: absolute;
  width:20px;
  height:20px;
  left:10px;
  top:10px;
  --border: 1px solid #03f;
  border-radius:50%;
  background: radial-gradient(at 80% 10%, yellow 5%, #ab0 30%, #05a 50%);
  animation: norotate 10s linear infinite;
  
}
#p2{
  width:15px;
  height:15px;
  left:300px;
  top:100px;
}

#system2{
  width:35px;
  height:35px;
  left:100px;
  top:300px;
  border: 0px solid #03f;
  border-radius:00%;
  background:none;
  animation: rotate 10s linear infinite;
}

#p3{
  width:35px;
  height:35px;
  left:0px;
  top:0px;
  animation: norotate 10s linear infinite;
}
#moon{
  left:50px;
  top:50px;
  animation: norotate 5s linear infinite;
}

@keyframes rotate {
  0 {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes norotate {
  0 {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

<div id="system">
  <div id=sun></div>
  <div class=planet id=p1></div>
  <div class=planet id=p2></div>
  
  <div class=planet id=system2>
    <div class=planet id=p3></div>
    <div class=planet id=moon></div>
  </div>

</div>

Answer 2

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

img {
  animation: reversed 5s infinite linear;
}

div {
  transform-origin: 50px 150px;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 0;
  animation: straight 5s infinite linear;
}

@keyframes straight {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(1turn);
  }
}

@keyframes reversed {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(-1turn);
  }
}

<div id="div">
  <img id="img" src="https://i.sstatic.net/O90fQZW1.png" width="100" height="100"/>
</div>

В случае использования js, достаточно просто менять координаты - картинки при этом поворачиваться не будут.

let turn = 0;
const len = 100;
const {
  top: t,
  left: l
} = getComputedStyle(img);
requestAnimationFrame(function draw() {

  img.style.left = `${len*Math.cos(turn)+parseInt(l)-50}px`;
  img.style.top = `${len*Math.sin(turn)+parseInt(t)+len}px`;

  turn += .01;
  requestAnimationFrame(draw);
});

img {
  position: absolute;
  left: 50%;
  top: 0;
}

<img id="img" src="https://i.sstatic.net/O90fQZW1.png" width="100" height="100"/>

Answer 3

в целом копия CSS версии от @Grundy, но с рядом сокращений.

img, div {
  animation: straight 5s infinite linear;
  width: 100px;
  height: 100px;
}

div {
  transform-origin: 50px 150px;
  position: absolute;
  left: 50%;
  top: 0;
  animation-direction: reverse; /* !!!!!!!!!! */
}

@keyframes straight {
  0% {
    transform: rotate(0);
  }

  to {
    transform: rotate(1turn);
  }
}

<div>
  <img src="https://i.sstatic.net/O90fQZW1.png"/>
</div>

БЛОГ НА HUSL

Как сделать вращение картинок относительно центра, но с сохранением положения самой картинки?

Ответы (3 шт):