THE (NEAR) FUTURE - CSS: Professional Techniques for Modern Layout - page 254

Given those styles, none of the background images would be repeated, because the single
no-repeat is applied to all the backgrounds that are assigned to the element. h e only
reason you had to write out all the repeat values before was that the i rst four have one value
and the i t h had another.

And if you were to write two values for background-repeat ?

.quotebox {
background-repeat : no-repeat, repeat-y ;
background-image : url(bg01.png), url(bg02.png), url(bg03.png), url(bg04.png) ;
background-position : top left, top right, bottom right, bottom left ;
background-color : #FFF ;}

In that case, the i rst and third images would not be repeated, whereas the second and fourth
images would be repeated along the y axis. With three repeat values, they would be applied to
the i rst, second, and third images, respectively, whereas the fourth image would take the i rst
repeat value.

2D TRANSFORMS
If you've ever wanted to rotate or skew an element, border, and text and all, then this section
is dei nitely for you.

256

First, though, a word of warning: In order to keep things legible, this section uses the unpre-
i xed version of the transform property. As of this writing, doing transforms in a browser
actually would require multiple prei xed declarations, like so:

-webkit-transform: …;
- moz-transform: …;
- o-transform: …;
- ms-transform: …;
transform: …;

h at should cease to be necessary in a year or two (I hope!) but in the meantime, keep in
mind as you read through this section that it's been boiled down to the unprei xed version for
clarity.

Time to get transforming! Possibly the simplest transform to understand is rotation (see
Figure 7-31). (In the next and subsequent i gures, the dashed red lines indicate where the
transformed elements were placed before their transformations.)

.box1 { -moz-transform : rotate(33.3deg) ;}
.box2 { -moz-transform : rotate(-90deg) ;}