Animated Rotation

Images can be rotated. Also entire divs with their content, but this article is about rotating images.

One way to accomplish rotations is with the CSS transform property.

Animated rotation means you can see the rotation happening on the page. If you prefer to have static rotation, where the rotation is already accomplished on page load, see the Tilted Content page in the Willmaster.com library.

The animated rotation you'll find in this article rotates an image a complete turn every so often, the timing specified by you. The rotation speed and how long it takes to turn are also specified by you.

The rotation can be repeated after a specific amount of time (every 3 seconds, for example) or the repetition time can be calculated randomly (from 2 to 12 seconds, for example).

A small image (perhaps tiny) being rotated every so often can attract attention to an important part of the page. Yet, because it is small, it does not have to be distracting. In addition to a small image, aspects that can be less distracting and also attract attention when the eye wanders are a quick rotation and a longer time between rotation repetitions.

Random time between rotation repetitions may have a larger attraction for the eye because it is less easy to automatically become blind to it.

Live Demo

The online demo below is an image 50x50 pixels. It is large enough to be distractive, especially being within the article content like it is. Because of that, I included a stop/restart button.

A smaller image would be less obtrusive, less distractive, which is likely to be desirable for live web pages.

In the demo, the Willmaster logo rotates once every 3 to 12 seconds. It is a pseudo-random choice, which means the same number may be chosen repeatedly before finally choosing a different one.

The source code for implementing this project is in two parts, the code for the img tag and the code for the JavaScript.

The img Tag Source Code

Here is the source code for the img tag. There are a number of customizations that may be done. You'll find them mentioned following the code box.

<img 
   id="my-rotating-image" 
   src="https://www.willmaster.com/images/wmlogo_icon.gif" 
   style="transition:transform 1s; width:50px; height:50px; transform:rotate(0turn);"> 

Three img tag customizations —

1. my-rotating-image is the id value for the image. If this is changed, the corresponding value in the JavaScript (further below) must also be changed.

2. Replace https://www.willmaster.com/images/wmlogo_icon.gif with your URL to the image to rotate.

3. Replace the digit 1 in transition:transform 1s; to the number of seconds for the rotation to complete. The 1 specifies that the image rotation is to complete in 1 second.

When the above is done, you are ready for the JavaScript.

The JavaScript Source Code

Place the JavaScript in the web page source code anywhere below the img tag.

Here is the JavaScript source code. Customization notes follow.

<script type="text/javascript">
var DivID = "my-rotating-image";
var MinimumSeconds = 3;
var MaximumSeconds = 12;
var RotationIncrements = 1;
var CurrentRotationCount = RotationIncrements;
function RotateTheImage()
{
   var nextStart = Math.floor(Math.random() * (MaximumSeconds - MinimumSeconds + 1)) + MinimumSeconds;
   document.getElementById(DivID).style.transform = "rotate("+CurrentRotationCount+"turn)";
   setTimeout(RotateTheImage,(nextStart*1000));
   CurrentRotationCount += RotationIncrements;
}
setTimeout(RotateTheImage,(MinimumSeconds*1000));
</script>

Four JavaScript customizations —

1. my-rotating-image in the var DivID = "my-rotating-image"; line is the id value for the image. It must correspond to the id value in the img tag.

2. In the var MinimumSeconds = 3; line is the number 3. Change the number 3 to the minimum number of seconds to wait between animated image turns.

   The number of seconds elapsed from one animated image turn to the next is measured from when the turns start. If the number of seconds to wait between animated image turns is 6 and the image turn itself takes 2 seconds, then the amount of time between the end of the first animated image turn and the beginning of the next is 4 seconds.

3. In the var MaximumSeconds = 12;line is the number 12. Change the number 12 according to these considerations:

   • The number must be no smaller than the number following var MinimumSeconds = .

   • The number may be the same as the number following var MinimumSeconds = to always wait the same amount of time between animated image turns.

   • The number may be larger than the number following var MinimumSeconds = to make the JavaScript select a random number of seconds within the span of the two numbers.

4. The number in the var RotationIncrements = 1; line indicates how many turns to animate the image. Replace the number 1 with the number of turns.

   To rotate counter-clockwise, use a negative number. Specifying 1 rotates the image once clockwise. Specifying −1 rotates the image once counter-clockwise.

Put those two, the img tag and the JavaScript, into a web page's source code. You'll have an animated rotating image that rotates according to your specified timing and number of turns.

This article first appeared with an issue of the Possibilities newsletter.

Will Bontrager