Home arrow Style Sheets arrow CSS3 Tranform Property: The Scale Method
STYLE SHEETS

CSS3 Tranform Property: The Scale Method


In this third part of the series, I explore another helpful method offered by the transform CSS3 property, called scale(). It permits you to dynamically resize an HTML element by modifying its width and height attributes simultaneously. To make the method work in most modern browsers (with Internet Explorer notoriously absent), it is necessary to appeal to proprietary implementations. If you’re planning to use this feature with any version of Microsoft’s browser, make sure to provide users of your web site with an appropriate fallback option.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
October 18, 2010
TABLE OF CONTENTS:
  1. · CSS3 Tranform Property: The Scale Method
  2. · Introducing the scale() method

print this article
SEARCH DEVARTICLES

CSS3 Tranform Property: The Scale Method
(Page 1 of 2 )

So far, the dynamic transformation of a web page element (and by dynamic transformation I mean rotating the element, scaling it up and down and even skewing it on the fly) has always occurred within the boundaries of client-side scripting. However, this trend is starting to change with the introduction of CSS3. The new specification includes a set of handy properties that permit you to achieve similar results without having to tackle the inner complexities of an object-oriented language like JavaScript.

Among these “behavioral” CSS3 properties, there’s one that you may find particularly attractive, due to its flat learning curve and remarkable functionality. Yes, as you may have already guessed, I'm referring to “transform,” a powerful property that can be used to easily apply the aforementioned effects to an HTML element, either individually or in conjunction, by using a single CSS declaration.

Of course, the major drawback in using the property is that it still lacks reliable support by some browser’s vendors (especially Microsoft, even though Internet Explorer 9 apparently will be a bit more friendly to CSS3). This shouldn’t stop you, though, from taking a look at “transform” to see what it can do for you, right?

With that idea in mind, in previous parts of this series, I went through the development of a few basic examples that demonstrated how to use some methods provided by the property, such as “translate(),” “translateX()” and “translateY().” These were useful for altering, be it simultaneously or separately, the X and Y coordinates of a selected element. This allowed us to move the element vertically and horizontally on the web page without taking it out of the normal rendering flow.

It’s important to point out, however, that the “transform” property is also capable of manipulating a web page element in many other appealing ways. It can even resize the element up and down via its “scale()” method. Therefore, in the course of this third installment of the series, I’m going to create a basic hands-on example that will show how to use this method in a truly painless fashion.

Ready to learn how to easily scale HTML elements by means of the “transform” property? Then start reading!

Review: individually altering the X and Y coordinates of an HTML element with the “translateX()/translateY()” methods

As usual, before I dig deeper into the subject and begin demonstrating how to resize a web page element via the “scale()” method, first I’d like to spend a few moments reintroducing the couple of examples built in the preceding part of this series. They showed how to modify separately the X and Y coordinates of a div through the “translateX()” and “translateY()” methods provided by the “transform” CSS3 property.

Having clarified that, here’s a web page that implements the first of these methods in a very simple manner. 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 'translateX()' 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: translateX(30px);
    -moz-transform: translateX(30px);
    -o-transform: translateX(30px);
    transform: translateX(30px);
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Using the transform CSS3 property (with the 'translateX()' 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>

If you ever thought that modifying the horizontal position of an element on a web page was a process plagued with difficulties and oddities, the above example should change your mind quickly. The “translateX()” method makes this task a no-brainer. In this particular case, the selected element is a div, but it’s feasible to use a different selector or even multiple ones. The possibilities are endless.

And if the previous code sample wasn’t clear enough for you, here’s an additional image that shows how the div is rendered on screen after being displaced 30px to the right on the containing (X)HTML document:

That was easy to grasp, indeed! So, let's move on and take a peek at the following code snippet.  It demonstrates how to shift the same div vertically by using the complementary “translateY()” method:

<!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 'translateY()' 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: translateY(30px);
    -moz-transform: translateY(30px);
    -o-transform: translateY(30px);
    transform: translateY(30px);
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Using the transform CSS3 property (with the 'translateY()' 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>

Again, the example above is so simple to follow that it’s not worth wasting your time (and mine) with irrelevant explanations. Instead, let's do something more useful and look at the below screen capture. It shows the final position assigned to the target div once the “translateY()” has been applied to it:

Definitely, you’ll have to agree with the that the “transform” property makes it ridiculously simple to move an HTML element either vertically or horizontally across a web page by means of the methods just reviewed. But as I explained at the beginning, the property is also capable of transforming an element in a few additional ways, other than the ones you've already learned.

To demonstrate the veracity of my claim, in the following segment I’m going to modify the web page defined previously to make use of the “scale()” method mentioned in the introduction. I'll use it to resize an element by simultaneously modifying its width and height attributes.

To learn how to use this method, jump ahead and read the lines to come.   


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