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

Home > Articles > Web Design & Development > Adobe Dreamweaver

  • Print
  • + Share This
From the author of 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.

  • + Share This
  • 🔖 Save To Your Account