HTML and CSS Reference
In-Depth Information
■
matrix(<number>,
<number>,
<number>,
<number>,
<number>,
<number>)
: Specifies a linear transformation matrix (
http://
transformation_matrices
)
for transformation of the element.
Starting with the dated flag graphic used the negative positioning
demonstration in Figure 7.6, you can rotate the flag and text by 270
degrees to sit alongside of the content item it is matched with.
/* modifications to 7.6 using transform */
article time {
/* adjust positioning */
top: 29px;
left: -81px;
/* for Firefox */
-moz-transform: rotate(270deg);
/* for Safari and Chrome */
-webkit-transform: rotate(270deg);
/* for Opera */
-o-transform: rotate(270deg);
/* W3C specs */
transform: rotate(270deg);
}
In the previous code example, the element was rotated and then posi-
tioned with absolute positioning to properly place it (
Figure 14.9
on the
next page). The position before the rotation (and thus in any browser
that doesn't support transitions) is shown by the dotted outline.
