Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Adobe Dreamweaver

  • Print
  • + Share This
From the author of Rotating

Rotating

The rotate transform effect in CSS3 is very similar to the skew effect, except that instead of distorting the shape of the selected content, the entire content rotates (see Figure 5).

Figure 5 Applying rotation to text and an image.

You can replicate the steps from the preceding section to define an ID Div style that rotates content; just replace skew with rotate. Your resulting CSS code will look like this in your CSS style sheet:

#rotate {
float:left;
background-color: #FF0;
margin: 10px;
padding: 10px;
width:150px;
height:200px;
border: thin solid #00F;
-webkit-transform:rotate(-15deg);
-moz-transform:rotate(-15deg);
-o-transform:rotate(-15deg);
}

You can adapt and customize this code by editing the background color, border, padding, size, and so on in the CSS Styles panel, and you can adjust the rotation angle in the CSS code.

  • + Share This
  • 🔖 Save To Your Account