do that we specify cosines and sines of the angle we want. For example, let’s
say we want to specify our badge rotation using matrix() instead of rotate().To do this, we need to take the angle we used, (–7.5 degrees) and calculate
the cosine, the negative value of sine, the sine, and the cosine again. In other
words, we do a linear transformation using a 2×2 matrix, like this:-webkit-transform: matrix(0.99144,-0.13052,0.13052,0.99144,0,0);
-moz-transform: matrix(0.99144,-0.13052,0.13052,0.99144,0px,0px);
-ms-transform: matrix(0.99144,-0.13052,0.13052,0.99144,0,0);
-o-transform: matrix(0.99144,-0.13052,0.13052,0.99144,0,0);
transform: matrix(0.99144,-0.13052,0.13052,0.99144,0,0);Complicated? Yes, and more so when you look at the previous example
closely. Remember that our original angle was negative 7.5 degrees. So, for
our negative sine, we need a positive value, and our sine gets a negative value.But this is cool because it means that we can do warping, skewing, rotation,
and any other transformation by specifying the right values. This is incredibly
powerful once you get the hang of it. If you want to see how more of this is
done, check out http://peterned.home.xs4all.nl/matrices/.Math is hard. Let’s make transparent backgrounds instead.
Transparent Backgrounds
Graphic designers have used semitransparent layers behind text for quite
some time, and that process usually involves either making a complete image
in Photoshop or layering a transparent PNG on top of another element with
CSS. CSS3 lets us define background colors with a new syntax that supports
transparency.When you first learn about web development, you learn to define your colors
using hexadecimal color codes. You define the amount of red, green, and blue
using pairs of numbers. 00 is “all off” or “none,” and FF is “all on.” So, the
color red would be FF0000 or “all on for red, all off for blue, and all off for green.”CSS3 introduces the rgb and rgba functions. The rgb function works like the
hexadecimal counterpart, but you use values from 0 to 255 for each color.
You’d define the color red as rgb(255,0,0).The rgba function works the same way as the rgb() function, but it takes a
fourth parameter to define the amount of opacity, from 0 to 1. If you use 0,
you’ll see no color at all, because it’s completely transparent. To make the
white box semitransparent, we’ll add this style rule to the info box:Chapter 8. Eye Candy • 162
Download from Wow! eBook <www.wowebook.com> report erratum • discuss