Возможно ли вращать див вокруг уже вращающегося дива при помощи чистого css?

Question

[Kentavr16]

Представьте себе модель солнечной системы. В центре - солнце. Вокруг него вращается земля. Вокруг земли вращается луна. Вопрос - возможно ли написать анимацию для такого вращения на чистом css? При этом солнце - один див, земля второй и луна соответственно третий. transform origin помогает только в случае если нужно задать центр вращения для статического элемента.

Comments

[Ankhena]

Да, возможно.
Что именно у вас не получилось?

[Ankhena]

Самое простое за полминуты

Можно накладывать друг на друга блоки разной формы и с разно скоростью вращения для достижения каких-то эффектов.

[Kentavr16]

Ankhena, Красиво, четко. Но в данном случае вы использовали :after. А по условию вращаться вокруг должен еще один див. Именно с этим проблемы.

[Kentavr16]

Ankhena, просто я пишу пет-проект на реакте. И в данном случае каждый вращающийся элемент - это отдельный компонент(как "планета", так и "спутник") со своей логикой, обработкой нажатий и тд и тп.

[Ankhena]

Kentavr16,

Красиво, четко. Но в данном случае вы использовали :after. А по условию вращаться вокруг должен еще один див. Именно с этим проблемы.

Ну какая разница?
div от псевдо в данном случае отличается только тем, что один в разметке, а другой нет. Уберите в псевдо свойство content и замените селектор, получите тоже самое.
Мне просто надоело писать дивы.

[Ankhena]

Kentavr16, обновила песочницу: один шарик псевдо, другой такой же div

[Kentavr16]

Ankhena, Спасибо большое. Действительно очевидное решение. Так же очевидно что мне нужно "больше в css". Элегантно - я даже не подумал о том чтобы вращать сам родительский шар, зафиксировав дочерний элемент. Просто в голову не пришло. Я всегда пытался вращать дочерний элемент вокруг определенной точки. Спасибо!

[Ankhena]

Kentavr16, можно мелким шарикам тоже добавить вращения.

Answer 1

[Kentavr16]

Можно. Ответ с примером в комментариях.