CSS3 Rotate Animation, Planete rotating on it`s axis

Question

well I`m trying to attempt a rotation on a img that i have

    #cometa {
    width: 200px;
    position: fixed;
    top: 20px;
    right: 20px;
    animation: spin;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@-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);
    }
}

with this example that i got from here

CSS3 Rotate Animation

But i want to the planet to rotate in its axys, this way it's rotating all over the place, what can i do the make it rotate diferently?

Did you search on the web before asking here?? Take a look at this [example](https://www.kirupa.com/animations/rotating_items_around_a_point.htm) or just set `transform-origin: center center` — Kunal Tanwar, Aug 27 '22 at 17:09
i actually did, and i tried several options but coulnd't get the result expected — Daniel Fabre, Aug 27 '22 at 19:17

Harsh Gaur · Answer 1 · 2022-08-28T09:33:02.040

Animation name is missing in your code. I hope it will help you

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style >
       
        #cometa{
        width: 200px;
        position: fixed;
        top: 100px;
        right: 200px;
        animation-name: spin;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    
    @-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);
        }
    }</style>
    <title>Document</title>
</head>
<body>
    <div id="cometa"><img src="https://cdn.pixabay.com/photo/2022/08/19/09/05/volcano-7396466_960_720.jpg" width="200px"></div>
</body>
</html>

[UPDATED] Below solution is for 3d rotation. Click on full page if result isn't visible.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style >
       
        #cometa{
        width: 200px;
        position: fixed;
        top: 200px;
        animation-name: spin;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    
    @-moz-keyframes spin {
        100% {
            -moz-transform: rotateY(360deg);
        }
    }
    
    @-webkit-keyframes spin {
        100% {
            -webkit-transform: rotateY(360deg);
        }
    }
    
    @keyframes spin {
        100% {
            -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
        }
    }</style>
    <title>Document</title>
</head>
<body>
    <div id="cometa"><img src="https://cdn.pixabay.com/photo/2022/08/19/09/05/volcano-7396466_960_720.jpg" width="200px"></div>
</body>
</html>

well this result i got it, I've sended the wrong code i guess, but i want it to spin horizontaly... like a planet rotation — Daniel Fabre, Aug 27 '22 at 19:19
You want to flip it 3d horizontally? Or do you want to spin it from the left end of the screen to the right end? — Harsh Gaur, Aug 28 '22 at 06:10
i want it to spin from the left to the right... I've tried some ideas but the img gets all messed up. — Daniel Fabre, Sep 01 '22 at 17:56
Did you check my second answer? Did that help you? Or do you need another answer? Can you please give me an example what type of animation you want? — Harsh Gaur, Sep 02 '22 at 14:40
yeah, i just checked, it would be something like this, but without the pic getting distorted. I wanted to simulate a planets rotation around it's axis, i have a cartoon planet and wanted to make it spin. But i don't think that it's possible. I can rotate it but it's nothing like a planet rotation. — Daniel Fabre, Sep 04 '22 at 18:48
If you want to spin the planets in their orbits, it is possible in css. But if you want to spin the planets in one place, you'll have to use SVG animation. or gif images. — Harsh Gaur, Sep 05 '22 at 14:03
yes, that's what i was thinking, trying multiple rotations i realized that i would need something like a gif or an svg to achieve that. I thought that it could've a way but with a plain picture and css it won't work. But thanks anyways, you helped alot" — Daniel Fabre, Sep 05 '22 at 18:36

CSS3 Rotate Animation, Planete rotating on it`s axis

1 Answers1