Tilted Content

Sometimes tilting an image or some text has exactly the effect on your page design that you're looking for. You do it with the transform property.

There is another reason to tilt something. It gets attention.

When a person wants to get attention without annoying the site visitor with animations, it generally is done with something unexpected or unusual. A tilted image or text can provide that.

The CSS3 transform property can do lots of things. This article focuses exclusively on its rotate value.

The rotate value is used to tilt an image or text a specific amount. Here is an example, text rotated toward the left 1½ degrees.

Text tilted with a rotation of 1.5 degrees.

The eye is attracted to anomalies. It generally doesn't take very much to get attention. Just 1½ degrees did the trick in this case.

Here is the code for the above tilted text.

<p style="transform:rotate(-1.5deg); text-align:center;">
Text tilted with a rotation of 1.5 degrees.
</p>

We'll do three more examples.

1. An image in a div with the div tilted toward the right.
2. The same div, the image tilted toward the right within the div itself.
3. The same div, the image tilted toward the left so it appears only the div is tilted, not the image.

The div with the image on the right is tilted toward the right with a 5 degree rotation. The image is linked to the sales page.

When a div is tilted, everything within the div is also tilted, unless coded otherwise.

Here is the source code for review.

<div style="transform:rotate(5deg); width:80px; float:right; border:1px solid black; padding:20px 20px 10px 20px; border-radius:9px;">
<a href="https://willbontrager.com/books-Will-Bontrager.php">
<img 
  src="https://willbontrager.com/52/images/cover-300px.jpg"
  style="max-width:100%; height:auto; border:none; outline:none;" 
  alt="52 Good-to-Know Techbits book cover">
</a>
</div>

Now, the image within the div is also tilted toward the right. Again with a 5 degree rotation.

And here is the source code for review.

<div style="transform:rotate(5deg); width:80px; float:right; border:1px solid black; padding:20px 20px 10px 20px; border-radius:9px;">
<a href="https://willbontrager.com/books-Will-Bontrager.php">
<img 
  src="https://willbontrager.com/52/images/cover-300px.jpg"
  style="transform:rotate(5deg); max-width:100%; height:auto; border:none; outline:none;" 
  alt="52 Good-to-Know Techbits book cover">
</a>
</div>

For the final example, the image within the div is tilted left so it appears to be upright within the tilted div.

Here is the source code for the final example.

<div style="transform:rotate(5deg); width:80px; float:right; border:1px solid black; padding:20px 20px 10px 20px; border-radius:9px;">
<a href="https://willbontrager.com/books-Will-Bontrager.php">
<img 
  src="https://willbontrager.com/52/images/cover-300px.jpg"
  style="transform:rotate(-5deg); max-width:100%; height:auto; border:none; outline:none;" 
  alt="52 Good-to-Know Techbits book cover">
</a>
</div>

In essence, you specify the transform:rotate(#deg); as a CSS rule for the element you want tilted. Replace # with the number of degrees to rotate. A negative number specifies a leftward tilt and a positive number specifies a rightward tilt.

The transform:rotate(#deg); rule (# replaced with a number) can be applied to block elements — p, div, pre and so forth. And also to some inline elements, such as the img element.

Use it in page design when appropriate. And to focus attention.

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

Will Bontrager