A two-minute trick for rotating objects

- Hello friends. I'm Sue Jenkins, and welcome to Productivity Tips for Web Designers. Today, you'll discover how to add interest to your grid-based layouts by rotating objects and text with a simple two-minute CSS trick. Before we begin, let's talk about the grid for a second. These days, it seems like nearly every site on the internet is neatly organized into rows and columns, and that's great. I love the grid as an organizing principle. Unfortunately, grid-based layouts can easily become monotonous or boring or even unruly if special care isn't taken with the principles and elements of design, such as line and space, type, contrast, proportion, and unity.

So how do you keep a design interesting when you're working with the grid? Well, besides using the right colors, fonts, and other graphic elements wisely, while also considering the entire design while making your design decisions, think about contrast. Contrast comes in lots of flavors. You could do contrast with color, with scale, with shape, even with orientation. Since the grid is essentially a system or horizontals and verticals, we can easily add contrast to that by adjusting the orientation of objects.

In other words, we can rotate things with CSS. Using the CSS3 transform property, you can rotate any text, as well as any object on your page. Rotating text can add an element of surprise or emphasis to your layout. Likewise, rotating a picture or some other element can help to break up the repetitiveness of a grid-based layout. To add a rotation to your text, you'll start by creating a CSS class style where you can set the angle of your text rotation in terms of positive and negative degrees from zero to 360.

Positive numbers rotate clockwise, while negative numbers rotate counterclockwise. While you're coding, be sure to include duplicate transform declarations with prefixes for WebKit, Mozilla, and Microsoft to ensure your transformation displays in all the popular browsers. Let's take a look at this page in a browser window. This text is rotated minus three degrees for the heading one. Rotating an element works pretty much in the same way using the transform property like I have highlighted here.

You can rotate objects in terms of positive and negative degrees from zero to 360. Let's take a look at this page in a browser too. Here are a few examples of rotating to the left and to the right, as well as 180 degrees, 90 degrees, and 45 degrees. In addition, when rotating an element that contains other content, like a box that has images and text inside of it, the entire element and all of its contents will rotate together as a single unit, like the yellow box on the left.

Of course, you can push that even further by adding one rotate to the element and another rotate to an object inside that element, like the two images inside the yellow box on the right. Now in this example with the yellow boxes, the text doesn't look exactly clear, and that may happen, so it's something that you might want to keep in mind. You could adjust the rotation. Maybe one or two degrees would be all it takes to get the text to come out clear. You could also change the font. The main thing you want to keep in mind is that when your text is HTML text, it's still searchable, it's still selectable, it's still SEO-friendly, whereas if you used a graphic, you know search engines don't read images.

So if your text doesn't look perfect, just go tweak your code a little bit, and you should be able to find a suitable solution to keep your text SEO-friendly. Rotating objects is a really great way to break up the grid, especially when you pair the rotation with other CSS styles, like borders, drop-shadows, and background colors. The next time you need to add a little contrast to your super-slick, grid-based layout, try adding a rotation.