2D Transforms and Transitions - Beginning CSS3 - page 443

On a touch-screen device, the images remain unscaled when tapped. But on all other devices that support
CSS transforms, they're scaled up and down on mouseover and mouseout.
Flipping Elements
Table 20-2 doesn't contain a transform function to flip elements horizontally or vertically, but you can achieve
the same effect by passing negative values to scaleX() , scaleY() , and scale() . Setting the value to -1 preserves
the original size, but flips the element on the relevant axis. To demonstrate the effect, scale_5.html contains the
following styles, which are applied to identical <div> elements:
#horizontal {
transform: scaleX(-1);
}
#vertical {
transform: scaleY(-1);
}
#shrinkflip {
transform: scale(-.5);
}
The value of transform-origin is not set, so the elements are flipped around their center, producing the
result in Figure 20-13 . The final <div> is flipped and scaled down along both axes, which produces the same effect
as scaling it down and rotating it 180°.
Figure 20-13. Setting the scaling factor to a negative number flips the element around the relevant axis
Skewing Elements
To skew an element, use the transform property and set its value by passing an angle as the argument to skewX()
or skewY() . With skewX() , a positive angle skews the element to the left, and a negative angle skews it to the right.
With skewY() , a positive angle skews the element vertically and rotates it in a clockwise direction. A negative
angle rotates it in an anticlockwise direction.
The following example is in skew.html (see Figure 20-14 ):
#horizontal {
transform: skewX(-30deg);
}
#vertical {
transform: skewY(20deg);
}