Home arrow Style Sheets arrow CSS3: Using the Transform Property
STYLE SHEETS

CSS3: Using the Transform Property


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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
October 12, 2010
TABLE OF CONTENTS:
  1. · CSS3: Using the Transform Property
  2. · Using the translate() method

print this article
SEARCH DEVARTICLES

CSS3: Using the Transform Property
(Page 1 of 2 )

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.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials