Home arrow Style Sheets arrow CSS3`s Transform Property: Manipulating Coordinates
STYLE SHEETS

CSS3`s Transform Property: Manipulating Coordinates


In this second part of a series, you will learn how to alter the X and Y coordinates of an HTML element separately through the complementary “translateX()” and “translateY()” methods provided by the “transform” CSS3 property. These methods are very easy to use.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
October 13, 2010
TABLE OF CONTENTS:
  1. · CSS3`s Transform Property: Manipulating Coordinates
  2. · Introducing the translateX() method

print this article
SEARCH DEVARTICLES

CSS3`s Transform Property: Manipulating Coordinates
(Page 1 of 2 )

Over the few past months, some of the brand new properties included with the CSS3 specification have been progressively adopted by most modern browser vendors. Of course, the exception to this healthy trend is Internet Explorer, even though its 9 version (still in beta, at least at the time of this writing) apparently will offer more complete support for the specification.

For this reason, it's natural to be tempted to start using some of those properties (with the proper fallback options) in production environments. That's exactly the case with "transform," a powerful CSS3 feature that allows you to easily scale up/down, rotate, move and even skew web page elements without having to use a single line of JavaScript. What's more, the functionality of the property isn't limited to applying these transformations individually; it's also possible to chain some of them, or all if you feel adventurous, via a single declaration (yes, that reminds me of jQuery's chainable methods). 

In reality, putting the "transform" property to work for you is a no-brainer process that can be mastered in a snap. The best way to demonstrate that this isn't simply my biased opinion is by showing some functional examples. In keeping with this idea, in the introductory part of this series I created a few which showed in a basic way how to use the property's "translate()" method to move an HTML element to a different position on a web page by simultaneously altering its X, Y coordinates. 

It's valid to note, though, that "transform" includes two methods, called "translateX()" and "translateY()," which can be used for individually assigning values to the corresponding coordinates. Therefore, in this second installment I'm going to illustrate how to use the methods through some practical examples.

Now, it's time to explore a few more handy features provided by the "transform" CSS3 property. Let's get going!

Review: simultaneously manipulating the X, Y coordinates of an HTML element via the transform's "translate()" method

As I stated in the introduction, the "transform" property makes it really easy to move an HTML element to a different position on a web page by modifying its X and Y coordinates at the same time. This task is accomplished through its "translate()" method, which performs this process without taking the target element out of the normal rendering flow (unlike absolute positioning, which does exactly the opposite).

Below I listed the example developed in the previous part of the series, which shows how to use the method with a single div. Check it out:

<!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 (with the 'translate()' option)</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;
}
#sample_div {
    width: 350px;
    padding: 20px;
    background: #00f;
    color: #fff;
    border: 1px solid #fff;
    -webkit-transform: translate(30px, 30px);
    -moz-transform: translate(30px, 30px);
    -o-transform: translate(30px, 30px);
    transform: translate(30px, 30px);
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Using the transform CSS3 property (with the 'translate()' option)</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 in the above code sample, the "translate()" method provided by the "transform" property has been applied to a div identified as "sample_div." While the example is pretty trivial and contrived, it shows in a nutshell how to displace an HTML element from its original position by assigning new values to its X and Y coordinates.

Logically, the previous example would miss the point if I don't include a screen capture that depicts how the target element is rendered on the browser, so here's the corresponding image:

Not too bad, huh? In this case, the sample div has been shifted 30px to the right and down from its initial position in the document. As you may have already guessed, it's possible to assign different values, even negative ones, as you'd normally do with the "left," "right," "top" and bottom" CSS properties. Needless to say, IE will ignore the effect produced by the property, so don't feel disappointed if you use it for testing the earlier web page. You've been warned!

And now that you've seen how the "translate()" method does its thing, it's time to explore other features offered by the "transform" property. In consonance with the concepts deployed in the introduction, in the following section I'm going to develop a whole new example that will demonstrate how to alter individually the X coordinate of the same sample div that you saw before via the property's "translateX()" method.

Now, to learn more on this topic, click on the link 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