• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 2. Speech Bubbles > Transforming the Avatars

Transforming the Avatars

We’ve completed all the styling for the speech bubbles themselves. What about the avatars, the little images next to each speech bubble? We could reuse some of the CSS3 effects such as box-shadow on them, but let’s do something new and use CSS3 transforms.

Note

Firefox currently doesn’t allow -moz-border-radius on img elements, so—sadly—you can’t round the avatars’ corners in that browser.


What are Transforms?

Transforms are a collection of effects, each called a transform function, that manipulate the box in ways like rotating, scaling, and skewing. These effects would previously have had to be accomplished with images, Flash, or JavaScript. Transforming objects with pure CSS avoids the need for these extra files, once again increasing the efficiency of both your development and the pages themselves.

The Lowdown on the transform Property

The transform property is part of both the 3D Transforms module found at www.w3.org/TR/css3-3d-transforms, and the 2D Transforms module, at www.w3.org/TR/css3-2d-transforms. All of the 2D transform functions are also included in the 3D spec, so you may just want to refer to the 3D spec.

There are too many transform functions to list here, but here’s sample syntax for the most important and supported ones:

  • translate moves the object to a new location, specified as an X and Y coordinate. Positive values move it right and down, respectively, and negative values move it left and up. Example: translate(20px, -10px)

  • scale scales the dimensions of the object X number of times. Negative values flip the object. To scale something smaller, use a number between 0 and 1. If you use two values, separated by commas, the first is the horizontal scaling factor and the second is the vertical scaling factor. Example: scale(2.5) or scale (1, .5)

  • rotate turns an object a specified number of degrees (deg). Positive values turn it clockwise; negative values turn it counterclockwise. Example: rotate(45deg)

  • skew skews or warps an object, again in degrees. The first value controls the horizontal slope and the second the vertical; if you use only one value, the skew on the Y axis is set to zero. Example: skew(10deg, 20deg)

You can include multiple transform functions in one transform property, separated with spaces. The transforms are applied in the order listed.

You can use the transform-origin property to specify the point of origin from which the transform takes place, using keywords, numbers, or percentages. The default is the center.

When you transform an object, the other objects around it don’t move to make way for the transformation (similar to relative positioning). The object is placed first in the flow, and then transformed.

Other than rotating avatars, you might want to use transforms for:


Table 2.7. 2D transforms browser support
IEFirefoxOperaSafariChrome
NoYes with -moz-, 3.5+Yes with -o-, 10.5+Yes with -webkit-Yes with -webkit-


Table 2.8. 3D transforms browser support
IEFirefoxOperaSafariChrome
NoNoNoYes with -webkit-, 5+No


Just like text-shadow, transforms can sometimes have a usability and accessibility benefit by allowing you to replace an image of text with real text. For instance, you may have a feature box or ad containing text that you want to be at a slight angle. Before transforms, you might have created an image of that angled box—text and all—and used that image in your page. Image text is less accessible, not searchable, and takes more work to create and edit.

Obviously, you don’t want to start skewing and rotating all the text on your page. That certainly wouldn’t improve readability! But in small doses, and in cases where you were going to use an image or Flash movie instead, transforms can improve accessibility by allowing you to accomplish the same effect with real text.

Rotating the Avatars

Let’s look at the syntax for transforms by rotating the avatars. Add this new rule to the styles:

.comment-meta img {
   -moz-transform: rotate(-5deg);
   -o-transform: rotate(-5deg);
   -webkit-transform: rotate(-5deg);
   transform: rotate(-5deg);
}

Note

You can have the syntax for all the different transforms written for you using the handy transforms CSS generator at http://westciv.com/tools/transforms.


The prefix-free transform property is not yet supported by any browser; we’ve included it for future compatibility.

The transform property (and, for now, all three browser-specific equivalents) tells the browser that you want to apply a transform. You then specify that the particular transform function you want is rotate, and that the number of degrees of rotation, using the deg unit, is negative five. You can use either positive or negative values. Other transform functions take different types of measurements—a value of -5deg doesn’t make much sense for scale, does it?—but the pattern is always the same:

transform: function(measurements);

Note

At the time of this writing, Chrome does a really bad job anti-aliasing the edges of the avatars when they’re rotated, making them very jagged. There’s no workaround. You can either remove the -webkit- declaration, which would also remove the rotation in Safari, or just live with the jaggedness.


You can also use the transform-origin property to specify the point of origin from which the transform takes place, such as the center or top right corner of the object. The default is the dead center, which is fine in our case, so there’s no need to add the transform-origin property here.

Save the page and refresh your browser. You’ll see that the avatars are now at an angle (Figure 2.25).

Figure 2.25. The rotate transform function angles the avatar images.


Workarounds for IE

IE’s Matrix filter can emulate several of the CSS3 transforms. Unfortunately, you have to do some complicated calculations using matrix mathematics to find the correct values to use in the filter. I’m guessing you’re not reading a web design book because you’re wild about math, so I’ll spare you that (I wouldn’t be able to explain it anyway) and point you to an online CSS generator called IE’s CSS3 Transforms Translator at www.useragentman.com/IETransformsTranslator, developed by Zoltan Hawryluk and yours truly.

To use the Transforms Translator, type rotate(-5deg) into the Step 1 input box and any width and height values you want (we’re not going to be using them, but they’re required to use the tool). Then click the Translate to IE Matrix button. The Step 2 box will appear below with two code blocks in it, one for CSS3-supporting browsers, and one for IE (Figure 2.26).

Figure 2.26. The Transforms Translator web site generates IE Matrix filter values that are equivalent to the CSS3 2D transforms you feed it.
www.useragentman.com/IETransformsTranslator


Copy the code from the IE box and paste it into the styles in the head of the page. Remove any comments from within the CSS:

#transformedObject {
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917454, M12=0.08715574274765871, M21=-0.08715574274765871, M22=0.9961946980917454, SizingMethod='auto expand')";
   filter: progid:DXImageTransform.Microsoft.Matrix(
           M11=0.9961946980917454,
           M12=0.08715574274765871,
           M21=-0.08715574274765871,
           M22=0.9961946980917454,
           SizingMethod='auto expand');
   margin-left: -11px;
   margin-top: -11px;
}

					  

This rule includes the filter property for IE 6 and 7, and the -ms-filter property for IE 8. Note that although the -ms-filter property shown above has line breaks in it, in order to fit within the page of this book, these are not there in the value generated by the Transforms Translator. Make sure you keep the -ms-filter property all on one line—it won’t work otherwise. The filter property works with or without line breaks in it. The margin values are there because IE doesn’t use the same origin point for the transform as other browsers, which would make the avatars slightly overlap the commenters’ names. Using margins or relative positioning nudges the elements into place to match up with the other browsers.

Now we need to change the selector to match the name of the element we want to transform, in this case .comment-meta img. We also need to divide the single rule into two rules: one for IE 6 and 7, and one for IE 8. Make sure you include the margin values in both rules.

.ie6 .comment-meta img, .ie7 .comment-meta img {
   filter: progid:DXImageTransform.Microsoft.Matrix(
           M11=0.9961946980917454,
           M12=0.08715574274765871,
           M21=-0.08715574274765871,
           M22=0.9961946980917454,
           SizingMethod='auto expand');
           margin-left: -11px;
           margin-top: -11px;
}
.ie8 .comment-meta img {
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(
   M11=0.9961946980917454, M12=0.08715574274765871, M21=-0.08715574274765871, M22=0.9961946980917454, SizingMethod='auto expand')";
   margin-left: -11px;
   margin-top: -11px;
}

					  

If you save the page and preview it in IE now, you’ll discover that it works perfectly in IE 7, but in IE 6 the tops of the images are cut off, and in IE 8 the images overlap the commenters’ names slightly (Figure 2.27).

Figure 2.27. The rotation (in IE 8) looks good, but the avatars overlap the commenters’ names.


The IE 6 problem is due to the negative margins on the images—IE 6 doesn’t display the part of an element that is outside its box if negative margins have moved it outside. To fix it, just add position: relative to the IE 6 and 7 rule:

.ie6 .comment-meta img, .ie7 .comment-meta img {
   filter: progid:DXImageTransform.Microsoft.Matrix(
           M11=0.9961946980917454,
           M12=0.08715574274765871,
           M21=-0.08715574274765871,
           M22=0.9961946980917454,
           SizingMethod='auto expand');
   margin-left: -11px;
   margin-top: -11px;
   position: relative;
}

Note

Remember, the line breaks shown in the -ms-filter property are just there for book formatting purposes. Make sure your -ms-filter property is all on one line.


The IE 8 overlapping problem is due to the fact that the negative margins don’t interact well with the other styles we already have in place. Let’s use relative positioning to reposition the images instead of negative margins:

.ie6 .comment-meta img, .ie7 .comment-meta img {
   filter: progid:DXImageTransform.Microsoft.Matrix(
           M11=0.9961946980917454,
           M12=0.08715574274765871,
           M21=-0.08715574274765871,
           M22=0.9961946980917454,
           SizingMethod='auto expand');
   position: relative;
   top: -5px;
   left: -5px;
}
.ie8 .comment-meta img {
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917454, M12=0.08715574274765871, M21=-0.08715574274765871, M22=0.9961946980917454, SizingMethod='auto expand')";
   position: relative;
   top: -5px;
   left: -5px;
}

					  

With these changes, the avatars are now rotated in IE 6 through 8 the same amount as in the transforms-supporting browsers, and they don’t overlap the commenters’ names below or the comment text to the right.

Instead of using the Matrix filter directly, you can use a premade script that uses it behind the scenes. A script has the advantage that you can then script changes in the transforms, to create animations or other effects, more easily. The cssSandpaper script (www.useragentman.com/blog/csssandpaper-a-css3-javascript-library), also by Zoltan Hawryluk, makes several transform functions as well as box-shadow, gradients, RGBA, and HSLA work in IE. The Transformie script by Paul Bakaus (http://paulbakaus.com/?p=11) is a simpler script that uses jQuery.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint