HTML and CSS Reference
In-Depth Information
Figure 14.9
The flag and text
content is rotated
by 270 degrees
to a vertical
position.
If this position before the translation is undesirable (for example, because
it is shifted too low), it may be better to position the element as it was in
the original example and then apply two transforms to get it to its final
appearance: rotation and translation (
Figure 14.10
).
/* modifications to 7.6 using two transforms */
article time {
/* for Firefox */
-moz-transform: rotate(270deg)
translate(-19px,-31px)
;
/* for Safari and Chrome */
-webkit-transform: rotate(270deg)
translate(-19px,-31px)
;
/* for Opera */
-o-transform: rotate(270deg)
translate(-19px,-31px)
;
/* W3C specs */
transform: rotate(270deg)
translate(-19px,-31px)
;
}
Figure 14.10
The flag and text
content is rotated
and translated,
leaving a
more desirable
nontransformed
state.
