Home / Articles / Adobe Dreamweaver / Using the Dreamweaver CS5 HTML5 Pack to Create CSS3 Transforms

Using the Dreamweaver CS5 HTML5 Pack to Create CSS3 Transforms

Article Description

By using CSS3 style sheets, you can apply some pretty cool visual effects to content in your web pages. David Karlins, author of Adobe Creative Suite 5 Web Premium How-Tos: Essential Techniques, shows how to work with a few of these effects in Dreamweaver CS5.
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.

8. Scaling and Translating | Next Section Previous Section