Rotate To Attract

Doing a slight rotation on text or an image can attract the eye. You'll find several examples here, along with the code to duplicate them.

Elements that are boxes in CSS can be rotated. An image with an img tag can be rotated. The contents of a div element can be rotated. But the contents of a span element can not be rotated with the transform:rotate() property.

To rotate something, use transform:rotate(-15deg), where -15deg is the amount of degrees to rotate (minus 15 degrees, in this case). Replace -15deg with the amount and direction of rotation you want.

Here is an example image rotated slightly toward the right, using transform:rotate(1.2deg) for the rotation.

The code for the above is this:

<img style="transform:rotate(1.2deg);" src="https://www.willmaster.com/possibilities/images/poss1253_landscape.png">

This next example is a div. The div contains both text and an image. The containing div's CSS contains transform:rotate(-11.0deg) for the rotation.

Happy Birthday, Precious!

Here is the code for the div with text and image:

<div style="transform:rotate(-11.0deg); text-align:center;">
   <div style="font-size:14pt; font-weight:bold;">Happy Birthday, Precious!</div>
   <img src="https://www.willmaster.com/possibilities/images/poss1253_birthdaycake.png">
</div>

Let's do one more example. For this, let's rotate words within a string of words. Here is the example:

The rotated words "up" and "down" in the above example are within div tags with style display:inline-block; (because span contents can not be rotated). Here is the source code:

A person can 
go <div style="display:inline-block; transform:rotate(-11.0deg);">up</div> or 
go <div style="display:inline-block; transform:rotate(11.0deg);">down</div> or 
stay still.

The CSS transform:rotate() property can be used for getting attention to specific elements of your content. The examples and their source code show how.

(This content first appeared in Possibilities newsletter.)

Will Bontrager