Customizing Media Elements - HTML5 Media - page 45

Figure 14 shows the video element from earlier examples, except now it's been spun on its
head, and scaled to one-half the size when the page is loaded.
Figure14.Video element scaled, rotated, and moved using CSS transforms
Once the video gets keyboard focus, or the mouse cursor moves over the element, then it re-
turns to the default orientation and normal size. No JavaScript or other technology is used: it's
all CSS—the CSS transform property, to be exact.
Some of you may be familiar with how CSS transforms work. If so, you can skip the next
couple of paragraphs and go right to the code in Example 11 .
The CSS3 2D transforms provide a way to manipulate HTML elements—including the media
elements—in two-dimensional space. It doesn't matter how warped you make the media ele-
ment, it still responds as a non-transformed media element.
All the transformations are functions on the CSS transform property. The functions include: