Web Developer Class: How to Use CSS3 Transforms with vCards

Using CSS3 transforms to style the hCard microformat provides a powerful means to design your web pages while at the same time providing contact information that, according to Microformats Wiki, "enables applications to retrieve information directly from web pages without having to reference a separate file."

Transforms are made up of four different properties:

• translate
• skew
• rotate
• scale

The majority of modern browsers all currently support transforms, including Firefox, Google Chrome, Opera, and Safari. Each browser has their own specific prefix. For example:

.vcard {
  -webkit-transform:;
  -moz-transform:;
  -ms-transform:;
  -o-transform:;
}

For the following examples, I'll use the -moz- prefix for the sake of keeping the examples short and uncluttered.

The images will all come from your CSS, not from the HTML. This is done without the use of id attributes and instead relies on :nth-of-type.

.vcard:nth-of-type(1) {
  background-image: url(a.jpg);
  background-repeat: no-repeat;
}
.vcard:nth-of-type(2) {
  background-image: url(a.jpg);
  background-repeat: no-repeat;
 }
.vcard:nth-of-type(3) {
  background-image: url(a.jpg);
  background-repeat: no-repeat;
}
.vcard:nth-of-type(4) {
  background-image: url(a.jpg);
  background-repeat: no-repeat;
}

For the sake of learning, I used the same image for each type. That way, when I start to transform the images, I can see the differences that I'm creating. In an actual web page, you'll most likely use different images.

Now we'll use transform so you can adjust the size of each of the images. Simply add -moz-transform: scale(1.25); to the block of code.

.vcard:nth-of-type(1) {
  background-image: url(a.jpg);
  background-repeat: no-repeat;
 -moz-transform: scale(1.25);
}

Adjust the scale to suit your needs. To increase the image size, use any number over 1.0. To decrease the size, use any number below 1.0. For example, 0.90 scales the image down to 90% of it's original size.

You can use rotate to, you guessed it, rotate the image. You can combine this with transform:

.vcard:nth-of-type(1) {
  background-image: url(a.jpg);
  background-repeat: no-repeat;
 -moz-transform: scale(1.25) rotate(90deg);
}

Last, you can use translate to move the image on the vertical and horizontal axis. You could go so far as piling the images on top of each other:

.vcard:nth-of-type(1) {
  background-image: url(a.jpg);
  background-repeat: no-repeat;
 -moz-transform: scale(1.25) rotate(45deg) translate(90px, 10px);
 }
.vcard:nth-of-type(2) {
  background-image: url(a.jpg);
  background-repeat: no-repeat;
 -moz-transform: scale(.75) rotate(90deg) translate(90px, 300px);
}

For the HTML side of the equation, you can go to hCard creator to help generate the hCard code. You can simply copy and paste the generated code into your HTML and tweak it as needed.

You'll notice that the hCard text is appearing on your web page alongside your text. You may or may not want that to happen. If you want the text off the page, but still accessible to search engines and applications, you'll need to add this to your CSS:

 .vcard * {
 text-indent: -9999px;
}