Implement and manipulate document structures and objects - Programming in HTML5 with JavaScript and CSS3 - page 66

Using the skew method
You can skew an HTML element using the skew method of the transform property. Skewing
slants the object so that it's not parallel to the vertical or horizontal axis. In the example code,
replace the transform property with the following code line. Figure 1-49 shows the effect
transform: skew(10deg, 10deg);
FIGURE 1-49 The effect of the skew method on an image
Using the scale method
The scale method enables you to resize elements by a specified ratio. The scale method takes
one parameter: a decimal value that represents the percentage to scale. Specifying a value
greater than 1 makes the object larger; specifying a value less than 1 but greater than 0
makes the object smaller. Specifying a value of -1 flips the object over its horizontal axis. In
the sample code, replace the transform property with the following:
transform: scale(1.5);
This scale transform increases the size of the element by 50 percent, essentially multiplying
the existing height and width values by 1.5. The object scales out from its absolute center
so that it expands in all directions; it doesn't just extend down and to the right. Figure 1-50
shows the result of a scale transform.
FIGURE 1-50 The effect of the scale transform on an image