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.
Scaling and Translating

Scaling and Translating

Applying scaling and translating (moving) to Div IDs is similar to defining a skew. The big difference: Instead of defining a rotation or skew angle, you define x and y values to define the changes to the width (x) and height (y) of a scaled object, or the location offset of a translated object.

Applying the steps used previously to create a skew, you can generate the following code to apply the scale effect:

#scale {
float:left;
background-color: #FF0;
margin: 10px;
padding: 10px;
width:150px;
height:200px;
border: thin solid #00F;
-webkit-transform: scaleX(2) scaleY(3);
-moz-transform:scaleX(2) scaleY(3);
-o-transform:scaleX(2) scaleY(3);
}

The X and Y parameters here double the width of the content of the ID Div and triple the height, both enlarging the content and stretching it to be taller and thinner (see Figure 6).

Figure 6 Scaling to stretch content—testing the effect in Firefox.

9. Above and Beyond: Other CS3 Code-Hints and Resources | Next Section Previous Section