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

FIGURE 1-47 The effect of the rotate transformation on an image
The transform also supports the rotateX and rotateY methods, which accept a single
parameter in degrees to specify an angle around the x-axis or y-axis in which to rotate. You
can, for example, use these methods to flip an element vertically or horizontally by specifying
180deg as the parameter. In this case, the element rotates 180 degrees along the specified
axis—which essentially results in the image being flipped or mirrored along that axis.
Using the translate method
The translate method lets you move an HTML element by changing its relative X and Y position
on the page. You implement the translate method by specifying the translate method on the
transform property. In the example listing, replace the transform method with the following:
transform: translate(50px,0px);
The translate method moves the HTML element to which it's applied by 50 pixels in the
X direction and 0 pixels in the Y direction relative to where it now resides (see Figure 1-48).
Again, translateX and translateY methods are available if the desired effect is to move the
object around the x-axis or y-axis.
FIGURE 1-48 The effect of the translate method applied to an image