Like this article? We recommend
Scaling and Translating
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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.