Home » CSS Infinite Rotate Class

CSS Infinite Rotate Class

Since this site originally started as basically my personal development paste bin, I’m going to try to remember to periodically keep updating it with random snippets that I tend to reuse. This is a simple CSS Infinite Rotate Class keyframe snippet so you can make an element on the page rotate by 360 degrees infinitely with the use of a simple CSS class. This is very bare bones and is meant to just be a snippet that you can use to copy/paste so your regular styling should still be needing to make the element look “pretty” if you will.

There’s really not much more to this post, I just want you all (and myself) to have this snippet:

That’s literally all that you actually need to do here, and the centered text is just for this sample so feel free to take that out if it doesn’t apply to the CSS Infinite Rotate Class that your project requires. There are a bunch of different ways to use this; one of the more popular ways being a circular image (like the recycle symbol). If you aren’t using an image and are using text content, then depending on how you want to style your element you may need to set the width, height, border-radius, and/or line-height all to the same width to create a “spinning badge” of sorts. Avery simple example of this would be something like https://jsfiddle.net/jphase/fx2ezxv8/:

YAS

If you’d like help implementing this with a piece of CSS you’re working on, and have a link to something that looks similar to what you’re trying to accomplish, drop me a line in the comments and I’ll try to see if I can help you figure out your implementation.

Leave a Reply

Your email address will not be published. Required fields are marked *