Rotate images and text with CSS 3

Learn how to rotate images and text with CSSRotated images can give your site or blog a interesting and modern look. Normally you would need to open a image editing program like Photoshop og Gimp, and manually rotate the images.

With CSS 3 you can avoid the manual work, and get the same effect by adding a small piece of CSS to you page.

See examples here

Rotating images and text CSS

Depending on the browser, there is different ways of rotating objects with CSS. In this post, we’ll include CSS instructions for CSS 3 capaple broiwsers, and/or Mozilla and Webkit based browsers.

The general syntax is common for all browasers:

rotate([rotation]deg)

Rotation is any number between 0 and 360, and represents the amount of degrees that you want to rotate the object.

Enough talk, lets go to the CSS:


.rotate {
 display: block;
transform: rotate(9deg);
-moz-transform: rotate(9deg);
-webkit-transform: rotate(9deg);

}

This CSS rotates the object 9 degrees, and includes browser specific CSS for Webkit and Mozilla browsers.

This image has been automatically rotated by CSS

As mentioned in the beginning of the post you can rotate all kinds of objects. With the CSS below, you can create a nice calendar, that uses plan text for the date information. The example is inspired by this great post from snook.ca


.example-date {

 background: #fff url(img/calendar.gif) no-repeat;
 float:left;
 position:relative;
 padding:45px 5px 0px;
 margin-left:10px;
 width: 100px;
 }
 .example-date .example-day {
 text-transform: uppercase;
 font-size:40px;
 padding: 0 0 5px 25px;
 }
 .example-date .example-month {
 font-size:18px;
 color: #fff;
 line-height:45px;
 position:absolute; left:10px; top:7px;
 }
 .example-date .example-year {
 display:block;
 font-size:12px;
 position:absolute; right:13px; top:17px;
 -webkit-transform: rotate(-90deg);
 -moz-transform: rotate(-90deg);
 }

A background image is used for the calendar look, but day, month and year is added as plain text with CSS styles.

CSS based calendar with rotated text


See all examples here

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
fold-left fold-right
About the author
Jørgen Nicolaisen has been passionately interested in everything online since 1995. His experience is based on working with small hobby projects as well as high volume websites. Jørgen is currently focused on the PHP based programming framework - Codeigniter, and WordPress naturally

One Reply to Rotate images and text with CSS 3

  1. seo Kyiv says:

    Great tips! Of cause PS is better to turn pic to some degrees, but CSS3 in some cases more convenient..

Comments are now closed for this article.