In this first part of a series, I provide you with a quick overview of the impressive results that can be obtained with the "transform" CSS3 property. In the example I develop here, the property’s “translate()” method is used for changing both the X and Y coordinates of a web page element (in this case a simple div), but it’s also possible to alter each coordinate individually just as easily.
Although currently the CSS3 specification is still in draft status, some of the new properties that it includes are rapidly being adopted by most browser vendors -- with the exception of Internet Explorer, which as usual doesn't stand out from the crowd for its progressive nature. This is exactly the case for the "transform" property, a powerful CSS3 feature that allows you, among other interesting things, to scale up and down, translate, move and skew a web page element without having to appeal to the functionality provided by JavaScript (yes, this is the so-called behavioral CSS).
Moreover, the property not only permits you to apply the transformations mentioned above individually, but can be used to chain all of them together easily within a single declaration. As I said before, though, Internet Explorer, in all its versions, doesn't support the property at all. However, other popular browsers, such as Firefox 3.5 and up, Opera 10.5 and Webkit 3.1, do provide decent support -- but as one might expect, through proprietary implementations.
So, if you're interested in learning how to use the "transform" CSS3 property, in this article series I'm going to develop some easy-to-follow examples that will get you started applying some engaging transformations to your own web page elements, without using any client-side scripting.
Ready to learn how to put the transform property to work for you in no time? Then begin reading right now!
Setting the stage for seeing the "transform" CSS3 property in action: building a basic web page
To demonstrate the functionality of the "transform" CSS3 property, we must first build a sample (X)HTML document that permits us to test the property in all its splendor. Therefore, below I defined a rudimentary web page. It includes a div element identified as "sample_div" (yes, I have to admit that my creativity with names blows me aways sometimes) that will be used to show how to work with the property.
Here's how the initial structure and visual presentation of this sample web page will look:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Using the transform CSS3 property</title> <style type="text/css"> body { padding: 0; margin: 0; background: #ddd; font: 0.8em Arial, Helvetica, sans-serif; color: #585858; } #wrapper { width: 960px; margin: 0 auto; background: #fff; } #header, #content, #footer { padding: 20px; } </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>Using the transform CSS3 property</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p> </div> <div id="content"> <h2>Main content section</h2> <div id="sample_div"> <h3>Subheading section</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div id="footer"> <h2>Footer section</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p> </div> </div> </body> </html>
As you can see from this code snippet, the structure of the above web page is pretty skeletal. It only defines the three typical sections that you'll find on nearly every web site out there: a header, a main content area and a footer. That's not rocket science, right? However, the page also contains the sample div mentioned a moment ago, which I plan to use for testing the "transform" property.
With the (X)HTML document set up, it's time to see the real functionality of the property when applied to the previous div. In keeping with this idea, in the following segment I'm going to demonstrate how to displace the target div from its original position by using a method provided by the property, called "translate()."
To learn the full details of this process, click on the link that appears below and keep reading.
Style Sheets 
CSS: Margins Overview
