Simple CSS Rotate
For a simple rotate, I generally use the CSS rotate property. I specify how many degrees or what fraction of a turn, and I'm good to go.
rotate:.5turn;)
Images can be rotated. Paragraphs, divs, even entire tables can be rotated. To rotate individual characters, they need to be in a div (or a table or other block container). To rotate a character within a line of text, specify the display:inline-block; CSS declaration for the div containing the character.
Rotation is clockwise. Both rotate:45deg; and rotate:.125turn; will rotate something an eighth of a full rotation. Although I rarely use radians, you can specify the amount of rotation that way. rotate:0.78539812rad; will rotate something an eighth of a full rotation.
<div style="rotate:45deg;">A</div>
<div style="rotate:.125turn;">A</div>
<div style="rotate:0.78539812rad;">A</div>
As mentioned, rotation is clockwise. To make something appear to be rotated counterclockwise 1/8 of a rotation, rotate it clockwise 7/8. Use rotate:315deg; or rotate:.875turn; or, if you prefer radians, rotate:5.49778688rad; can be used.
<div style="rotate:315deg;">A</div>
<div style="rotate:.875turn;">A</div>
<div style="rotate:5.49778688rad;">A</div>
Unless you specify otherwise, the rotate property will rotate from the middle. In other words, the axle is the center of the image or div or whatever you are rotating.
The rotate property is actually quite sophisticated. If you wander away from the simple implementation suggested above, rotate:_______(deg|turn|rad), then it can get non-simple pretty quick. MDN has a page dedicated to the various ways rotate can be used.
For everyday use, the simple rotate mentioned above is my go-to.
(This content first appeared in Possibilities newsletter.)
Will Bontrager
