CSS Rotate

When you wish to rotate text or an image, consult this article for a basic how-to. Only HTML and CSS are used. No JavaScript is required for this functionality.

Here are 4 examples. The word "Rotation" is being rotated in 2 of the examples. The Willmaster logo is being rotated in the other two examples.

9-second Rotation

0.65-second Rotation

The rotation rate is specified in the CSS. Here is the CSS. The rotation is specified in the last line of CSS code (marked as 2s for visual recognition).

<style type="text/css">
@keyframes rotating {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.rotation-div { animation: rotating 2s linear infinite; }
</style>

The CSS can be used as you see it above. You may change 2 in 2s and you may also change rotation-div in the CSS.

The digit 2 in 2s specifies the number of seconds to use for one rotation. The s in 2s confirms that you mean number of seconds.

Change 2s according to how fast you want your text or image to rotate.

The rotation-div is the class name to use in your HTML. The rotation-div class name may changed. If changed, the class name in the following HTML example will need to be changed accordingly.

These two div tag examples rotate the word "Rotation" and rotate the Willmaster logo.

<div 
  class="rotation-div"
  style="text-align:center; width:100px; height:100px; line-height:100px;" 
>Rotation</div>

<div 
  class="rotation-div"
  style="width:50px; height:50px;" 
><img src="https://www.willmaster.com/images/wmlogo_icon.png" style="width:50px; height:50px;" alt="Willmaster logo"></div>

Notice in both div tags that rotation-div is the class name.

Each div has its own styling in addition to the rotation-div class.

The rotating text:

The div style's height value is the same as the width value.

The line-height value is the same as the height value. It brings the rotating text down to the vertical middle of the div.

The text-align:center CSS centers the text horizontally within the div.

The above CSS is for one line of text within the rotating div. If you need more than one line, let me suggest creating an image with the text and rotating the image. Otherwise, you'll need to put a div within the rotating div and futz with the CSS until the rotation is what you want to see.

The rotating image:

The div style's height value and width value are the same as the image's height value and width value.

That was the basic code for rotating a line of text or an image.

(This content first appeared in Possibilities newsletter.)

Will Bontrager