Rotate

The CSS rotate property is versatile, more versatile than the transform:rotate() function.

Although versatile, the rotate examples in this article are simple.

Toward the end of the article are a few hints about its versatility. For a deeper immersion into the CSS rotate property, see the Mozilla rotate reference.

Simple? Yes, very much so.

Let's suppose you want to rotate a paragraph 3 degrees toward the right. Use rotate:3deg for this effect:

This paragraph is rotated 3 degrees to the right. (For visual comprehension, this is added to wrap the line even in large desktop browser windows.)

Here is the source code for the above example.

<p style="rotate:3deg;">
This paragraph is rotated 3 degrees to the right. (For visual comprehension, this is added to wrap the line even in large desktop browser windows.)
</p>

Let's do the same amount of rotation but toward the left. Use rotate:-3deg for the effect:

This paragraph is rotated 3 degrees to the left. (For visual comprehension, this is added to wrap the line even in large desktop browser windows.)

Here is the source code for the above example.

<p style="rotate:-3deg;">
This paragraph is rotated 3 degrees to the left. (For visual comprehension, this is added to wrap the line even in large desktop browser windows.)
</p>

That's it. That's the simplicity. Use the CSS rotate property on HTML content blocks. Block tags p, div, td, and img are examples.

Versatility

The amount of rotation can be specified as deg, turn, or rad. Only deg is used in the examples. The link a couple short paragraphs down talks about each of those.

The rotation axis may be specified as x, y or z. The default is z, as you see in the above examples.

A representation of 3D rotation can also be specified.

See the Mozilla rotate reference page for coding the versatility.

The default axis, as demonstrated in the examples above, is the easy-peasy aspect of using the rotate property. It is what I use the most. For those who need more, the more versatile aspects are available.

(This content first appeared in Possibilities newsletter.)

Will Bontrager