DEV Community

Cover image for Rotate a circle with CSS
Benjamin Thorpe
Benjamin Thorpe

Posted on • Edited on

Rotate a circle with CSS

Ever wonder how people animate images or anything? Like this image below?? Well today is your lucky day, It turns out to be simple to make.
circle rotate

Disclaimer: Having basic CSS Animation knowledge would really help.

Start with the basic HTML template. You can use any image



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS Rotating Circle</title>
    <link rel="stylesheet" type="text/css" href="circle.css">
</head>
<body>
    <h1>CSS Rotating Circle</h1>

    <main>
        <div>
            <img src="iconmonstr-circle-5.svg" alt="circle">
        </div>
    </main>
</body>
</html>


Enter fullscreen mode Exit fullscreen mode

This boring Image should show up on the browser.
rotate1

Let's spice it up a little, shall we?



/* circle.css */
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
body{
    width: 90%;
    margin: auto;
    text-align: center;
    padding: 20px 0px;
    font-family: Arial;
}
main{
    height: 500px;
    display: grid;
    align-items: center;
}


Enter fullscreen mode Exit fullscreen mode

you can use other trick to center the contents, I went with Grid display: grid; and align-items: center;.

Increase the image size a little with the style below, since we are using an SVG image.



main img{
    width: 200px;
    height: 200px;
    animation-name: rotate;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    border-radius: 50%;
}


Enter fullscreen mode Exit fullscreen mode

border-radius can be optional. Everything should look cute now like the image below.

rotate3

We can't animate anything if we don't have the @keyframes specified.



@keyframes rotate{
    from{ transform: rotate(-360deg); }
    to{ transform: rotate(360deg); }
}


Enter fullscreen mode Exit fullscreen mode

And voilà, its done. Also note that animation-name: and @keyframes share the same name rotate.
circle rotate

You can play with it or even add more functionality to it, like starting and stopping the animation with JavaScript.

Thanks for reading.

Top comments (1)

Collapse
 
catskipou profile image
catsKipou

Thank you for your post. Great content!
I adapted your code to my case: I replaced the IMG by a DIV, and used CSS to draw the circle with these two lines:

border-radius: 50%;
border: 5px dashed black;