Customizing Media Elements - HTML5 Media - page 47

By default, transform-origin is set to a value of 50% 50%, but can be changed—either
by providing one value (which sets the horizontal value, vertical is set to 50%); two values
(setting both horizontal and vertical); using percentages (50% 50%) or actual values (-100px,
100px); or by providing named values (such as top, top center, or center top, which equates to
values of 50% 0).
Example 11 replicates the stylesheet in Example 10 , except that transforms are used when the
element is first loaded, and again when the element gets keyboard or mouse focus. When first
loaded, the video element is scaled one-half size, and rotated 90 degrees. It's also moved 100
pixels “up” the page, by translating it 100 pixels along the X axis (which is now the vertical
axis since the element has been rotated). When it gets the focus, though, it's scaled back to
normal size, returned to the normal rotation (0 degrees), and moved back to the default posi-
tion.
Example11.Applying CSS3 transforms to a video element
<style>
video
{
/* basic border */
border: 1px solid #ccc;
padding: 20px;
margin: 20px;
border-radius: 20px;
/* add regular background */
background-color: #ffcccc;
/* add gradient background */
background-image: -moz-linear-gradient(top, #fff, #fcc);
background-image: -webkit-linear-gradient(top, #fff, #fcc);
background-image: -o-linear-gradient(top, #fff, #fcc);
background-image: -ms-linear-gradient(top, #fff, #fcc);
background-image: linear-gradient(top, #fff, #fcc);
/* now a shadow */
-webkit-box-shadow: 0 0 10px #ccc;
box-shadow: 0 0 10px #ccc;
/* now transform */
-moz-transform: scale(0.5) translate(-100px, 0) rotate(90deg);
-webkit-transform: scale(0.5) translate(-100px, 0) rotate(90deg);
-o-transform: scale(0.5) translate(-100px, 0) rotate(90deg);
-ms-transform: scale(0.5) translate(-100px, 0) rotate(90deg);
transform: scale(0.5) translate(-100px, 0) rotate(90deg);