How to make an image rotating around static logo?

Question

I'm working on a website and i had no idea how to make an image rotating infinitely around a static logo.

I don't have any code as I am not familiar with web coding, so if anyone here can provide a codepen or jsfiddle? My website is working on 100% html, css and js.

I've googling a lot of article but none of it is exactly as I want.

I expect for a HTML code with CSS and JS

Here https://stackoverflow.com/questions/35749909/how-to-animate-image-circular-in-css — Ibra, Apr 05 '19 at 04:59
Or here : https://www.useragentman.com/blog/2013/03/03/animating-circular-paths-using-css3-transitions/ — Ibra, Apr 05 '19 at 05:01
Possible duplicate of [CSS3 Rotate Animation](https://stackoverflow.com/questions/16771225/css3-rotate-animation) — josephting, Apr 05 '19 at 05:04
*" none of it is exactly as I want"* ... how would we know what you want exactly? — charlietfl, Apr 05 '19 at 05:16
You've somehow misunderstood how SO works. This is not a free code writing service, we're solving problems you face when you're writing code. — Teemu, Apr 05 '19 at 05:17

score 2 · Answer 1 · answered Apr 05 '19 at 05:13

Based on the answer How to animate image circular in css

you can do the following:

HTML:

<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

CSS:

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

That man also added a jsFiddle link for you to see the effect of above one. http://jsfiddle.net/aquadk/m23sadrz/

This answer doesn't introduce anything new compared to the original answer, rather vote to close as a duplicate than just copy another answer. — Teemu, Apr 05 '19 at 05:15
agreed i just thought i could spare an extra click for who needs it. but closing is the better option (best if this could be merged with original) :) — ahmednawazbutt, Apr 05 '19 at 05:16

score 2 · Answer 2 · answered Apr 05 '19 at 05:19

A simple way is to add a CSS class to your image element and use keyframe animations.

https://codepen.io/limxz/pen/GLZdJN

As you can see from the demo, you have to define a keyframe (it's kind of like an animation sequence) and then add the parameters to control it.

@keyframes infinite-spinning {
  0%{
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.image-to-spin {
  animation: infinite-spinning 1s infinite;
}

score 0 · Answer 3 · answered Apr 05 '19 at 06:14

As I understand you need effect like moon rotating around the earth. You'll be able do it using CSS animation and transform-origin attribute.

transform-origin change your rotation point of the object. Normally transform-origin is located at center of the object but changing X and Y attributes for the transform-origin you will able to change the rotation point.

here is a example

<div class="logo-wrapper">
    <h1>LOGO</h1>
    <span class="img"></span>
</div>

replace span.img with your desire image

Hope this will help you!

How to make an image rotating around static logo?

3 Answers3